import { Box } from './Box';
import { Card } from './Card';
import { Text } from './Text';

export interface GoalCardProps {
  title: string;
  current?: number;
  target?: number;
  unit?: string;
  icon: string;
  goalLabel?: string;
  currentValue?: number;
  maxValue?: number;
}

export const GoalCard = ({ 
  title, 
  current, 
  target, 
  unit, 
  icon,
  goalLabel,
  currentValue,
  maxValue
}: GoalCardProps) => {
  const finalCurrent = currentValue ?? current ?? 0;
  const finalTarget = maxValue ?? target ?? 100;
  const finalUnit = goalLabel ?? unit ?? '';
  const percentage = Math.min(Math.max((finalCurrent / finalTarget) * 100, 0), 100);

  return (
    <Card variant="default">
      <Box display="flex" alignItems="center" gap={3} marginBottom={3}>
        <Text size="2xl">{icon}</Text>
        <Box>
          <Text weight="bold" variant="high">{title}</Text>
          <Text size="sm" variant="low">{finalUnit}</Text>
        </Box>
      </Box>
      
      <Box marginBottom={2}>
        <Box display="flex" alignItems="center" justifyContent="between" marginBottom={1}>
          <Text size="xs" variant="low">Progress</Text>
          <Text size="xs" weight="bold" variant="high">{Math.round(percentage)}%</Text>
        </Box>
        <Box fullWidth height="0.5rem" bg="var(--ui-color-bg-surface-muted)" style={{ borderRadius: '9999px', overflow: 'hidden' }}>
          <Box fullHeight bg="var(--ui-color-intent-primary)" style={{ width: `${percentage}%` }} />
        </Box>
      </Box>
      
      <Text size="xs" variant="low">
        {finalCurrent} / {finalTarget} {finalUnit}
      </Text>
    </Card>
  );
};