import { ReactNode } from 'react';
import { Box } from './Box';
import { Card } from './Card';
import { Stack } from './Stack';
import { Surface } from './Surface';
import { Text } from './Text';

interface HorizontalStatCardProps {
  label: string;
  value: string | number;
  subValue?: string;
  icon: ReactNode;
  iconBgColor?: string;
}

export function HorizontalStatCard({
  label,
  value,
  subValue,
  icon,
  iconBgColor,
}: HorizontalStatCardProps) {
  return (
    <Card>
      <Stack direction="row" align="center" gap={3}>
        <Surface
          variant="muted"
          rounded="full"
          padding={3}
          style={{ backgroundColor: iconBgColor }}
        >
          {icon}
        </Surface>
        <Box>
          <Text size="xs" color="text-gray-400" block mb={1}>
            {label}
          </Text>
          <Text size="2xl" weight="bold" color="text-white" block>
            {value}
          </Text>
          {subValue && (
            <Text size="sm" color="text-gray-400">
              {subValue}
            </Text>
          )}
        </Box>
      </Stack>
    </Card>
  );
}