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

interface MetricCardProps {
  label: string;
  value: string | number;
  icon?: LucideIcon;
  color?: string;
  trend?: {
    value: number;
    isPositive: boolean;
  };
  border?: boolean;
  bg?: string;
}

/**
 * A semantic component for displaying metrics.
 * Instrument-grade typography and dense-but-readable hierarchy.
 */
export function MetricCard({
  label,
  value,
  icon,
  color = 'text-primary-accent',
  trend,
  border = true,
  bg = 'panel-gray/40',
}: MetricCardProps) {
  return (
    <Box
      bg={bg}
      rounded="none"
      p={4}
      border={border}
      borderColor="border-gray/30"
      display="flex"
      flexDirection="col"
      gap={2}
      hoverBg="panel-gray/60"
      transition
    >
      <Box display="flex" alignItems="center" justifyContent="between">
        <Box display="flex" alignItems="center" gap={2}>
          {icon && <Icon icon={icon} size={4} className={color} />}
          <Text size="xs" weight="bold" color="text-gray-500" uppercase letterSpacing="widest">
            {label}
          </Text>
        </Box>
        {trend && (
          <Text size="xs" color={trend.isPositive ? 'text-success-green' : 'text-red-400'} font="mono">
            {trend.isPositive ? '▲' : '▼'} {trend.value}%
          </Text>
        )}
      </Box>
      <Text size="2xl" weight="bold" color="text-white" font="mono">
        {typeof value === 'number' ? value.toLocaleString() : value}
      </Text>
    </Box>
  );
}