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

export interface SummaryItemProps {
  label?: string;
  value?: string | number;
  icon?: LucideIcon;
  intent?: 'primary' | 'success' | 'warning' | 'critical' | 'telemetry';
  onClick?: () => void;
  title?: string;
  subtitle?: string;
  rightContent?: React.ReactNode;
}

export const SummaryItem = ({ 
  label, 
  value, 
  icon, 
  intent = 'primary',
  onClick,
  title,
  subtitle,
  rightContent
}: SummaryItemProps) => {
  const finalTitle = title || label || '';
  const finalValue = value || subtitle || '';

  return (
    <Surface 
      variant="muted" 
      rounded="lg" 
      padding={4} 
      onClick={onClick}
      style={{ cursor: onClick ? 'pointer' : 'default' }}
    >
      <Box display="flex" alignItems="center" justifyContent="between">
        <Box display="flex" alignItems="center" gap={4}>
          {icon && (
            <Box padding={2} rounded="lg" bg="var(--ui-color-bg-surface-muted)">
              <Icon icon={icon} size={5} intent={intent} />
            </Box>
          )}
          <Box>
            <Text size="xs" weight="bold" variant="low" uppercase>
              {finalTitle}
            </Text>
            <Text size="lg" weight="bold" variant="high" block marginTop={0.5}>
              {finalValue}
            </Text>
          </Box>
        </Box>
        {rightContent}
      </Box>
    </Surface>
  );
};