import { Text } from '@/ui/Text';
import { Group } from '@/ui/Group';
import { Card } from '@/ui/Card';
import React from 'react';

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

export function MilestoneItem({ label, value, icon }: MilestoneItemProps) {
  return (
    <Card variant="dark">
      <Group direction="row" align="center" justify="between" fullWidth>
        <Group direction="row" align="center" gap={3}>
          <Text size="xl">{icon}</Text>
          <Text size="sm" variant="low">{label}</Text>
        </Group>
        <Text size="sm" weight="medium" variant="high">{value}</Text>
      </Group>
    </Card>
  );
}