import React, { ReactNode } from 'react';
import { Box } from './Box';
import { Card } from './Card';
import { Text } from './Text';

export interface QuickStatItemProps {
  label: string;
  value: string | number;
}

export const QuickStatItem = ({ label, value }: QuickStatItemProps) => (
  <Box textAlign="center" paddingX={4}>
    <Text size="2xl" weight="bold" variant="high">{value}</Text>
    <Text size="xs" variant="low" uppercase>{label}</Text>
  </Box>
);

export interface QuickStatCardProps {
  children: ReactNode;
}

export const QuickStatCard = ({ children }: QuickStatCardProps) => {
  return (
    <Card variant="glass">
      <Box display="flex" alignItems="center" padding={6}>
        {React.Children.map(children, (child, index) => (
          <React.Fragment key={index}>
            {index > 0 && <Box width="1px" height="2.5rem" bg="var(--ui-color-border-muted)" style={{ opacity: 0.2 }} />}
            {child}
          </React.Fragment>
        ))}
      </Box>
    </Card>
  );
};