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

export interface MetricCardProps {
  label: string;
  value: string | number;
  icon?: LucideIcon;
  intent?: 'primary' | 'success' | 'warning' | 'critical' | 'telemetry';
  trend?: {
    value: number;
    isPositive: boolean;
  };
}

export const MetricCard = ({ 
  label, 
  value, 
  icon, 
  intent = 'primary',
  trend 
}: MetricCardProps) => {
  return (
    <Card variant="default">
      <Box display="flex" alignItems="start" justifyContent="between" marginBottom={4}>
        <Box>
          <Text size="xs" weight="bold" variant="low" uppercase>
            {label}
          </Text>
          <Text size="2xl" weight="bold" variant="high" block marginTop={1}>
            {value}
          </Text>
        </Box>
        {icon && (
          <Box padding={2} rounded="lg" bg="var(--ui-color-bg-surface-muted)">
            <Icon icon={icon} size={5} intent={intent} />
          </Box>
        )}
      </Box>
      
      {trend && (
        <Box display="flex" alignItems="center" gap={1}>
          <Text 
            size="xs" 
            weight="bold" 
            variant={trend.isPositive ? 'success' : 'critical'}
          >
            {trend.isPositive ? '+' : '-'}{Math.abs(trend.value)}%
          </Text>
          <Text size="xs" variant="low">
            vs last period
          </Text>
        </Box>
      )}
    </Card>
  );
};