import { Text } from '@/ui/Text';
import { Stack } from '@/ui/primitives/Stack';

interface MilestoneItemProps {
  label: string;
  value: string;
  icon: string;
}

export function MilestoneItem({ label, value, icon }: MilestoneItemProps) {
  return (
    <Stack direction="row" align="center" justify="between" p={3} rounded="md" bg="bg-deep-graphite" border borderColor="border-charcoal-outline">
      <Stack direction="row" align="center" gap={3}>
        <Text size="xl">{icon}</Text>
        <Text size="sm" color="text-gray-400">{label}</Text>
      </Stack>
      <Text size="sm" weight="medium" color="text-white">{value}</Text>
    </Stack>
  );
}