import React from 'react';
import { Box } from './primitives/Box';
import { Text } from './Text';
import { Surface } from './primitives/Surface';
import { Icon } from './Icon';
import { LucideIcon } from 'lucide-react';

interface SummaryItemProps {
  label?: string;
  value?: string | number;
  icon?: LucideIcon;
  onClick?: () => void;
  title?: string;
  subtitle?: string;
  rightContent?: React.ReactNode;
}

export function SummaryItem({ label, value, icon, onClick, title, subtitle, rightContent }: SummaryItemProps) {
  return (
    <Surface
      variant="muted"
      rounded="lg"
      p={4}
      display="flex"
      alignItems="center"
      gap={4}
      cursor={onClick ? 'pointer' : 'default'}
      onClick={onClick}
      hoverBg={onClick ? 'bg-white/5' : undefined}
      transition={!!onClick}
    >
      {icon && (
        <Box p={2} rounded="lg" bg="bg-white/5">
          <Icon icon={icon} size={5} color="text-gray-400" />
        </Box>
      )}
      <Box flex={1}>
        {(label || title) && (
          <Text size="xs" color="text-gray-500" uppercase letterSpacing="wider" block>
            {label || title}
          </Text>
        )}
        {(value || subtitle) && (
          <Text size="lg" weight="bold" color="text-white" block>
            {value || subtitle}
          </Text>
        )}
      </Box>
      {rightContent && (
        <Box>
          {rightContent}
        </Box>
      )}
    </Surface>
  );
}