import React from 'react';
import { Box } from './Box';
import { Stack } from './Stack';
import { Text } from './Text';
import { Heading } from './Heading';
import { Card } from './Card';
import { ProgressBar } from './ProgressBar';

interface GoalCardProps {
  title: string;
  icon: string;
  goalLabel: string;
  currentValue: number;
  maxValue: number;
  color?: string;
}

export function GoalCard({
  title,
  icon,
  goalLabel,
  currentValue,
  maxValue,
  color = 'text-primary-blue',
}: GoalCardProps) {
  return (
    <Card bg="bg-charcoal-200/50" borderColor="border-primary-blue/30">
      <Box display="flex" alignItems="center" gap={3} mb={3}>
        <Text size="2xl">{icon}</Text>
        <Heading level={3}>{title}</Heading>
      </Box>
      <Stack gap={2}>
        <Box display="flex" alignItems="center" justifyContent="between">
          <Text size="sm" color="text-gray-400">{goalLabel}</Text>
          <Text size="sm" className={color}>{currentValue}/{maxValue}</Text>
        </Box>
        <ProgressBar value={currentValue} max={maxValue} />
      </Stack>
    </Card>
  );
}