import React from 'react';
import { Card } from './Card';
import { Box } from './primitives/Box';
import { Text } from './Text';

export interface GoalCardProps {
  title: string;
  current: number;
  target: number;
  unit: string;
  icon: string;
}

export const GoalCard = ({ 
  title, 
  current, 
  target, 
  unit, 
  icon 
}: GoalCardProps) => {
  const percentage = Math.min(Math.max((current / target) * 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">{unit}</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">
        {current} / {target} {unit}
      </Text>
    </Card>
  );
};