import { DateFormatter } from '@/lib/formatters/DateFormatter';
import { Card } from '@/ui/Card';
import { Group } from '@/ui/Group';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';

interface AchievementCardProps {
  title: string;
  description: string;
  icon: string;
  unlockedAt: string;
  rarity: 'common' | 'rare' | 'epic' | 'legendary';
}

export function AchievementCard({
  title,
  description,
  icon,
  unlockedAt,
  rarity,
}: AchievementCardProps) {
  const rarityVariantMap = {
    common: 'rarity-common',
    rare: 'rarity-rare',
    epic: 'rarity-epic',
    legendary: 'rarity-legendary'
  } as const;

  return (
    <Card
      variant={rarityVariantMap[rarity]}
    >
      <Group direction="row" align="start" gap={3}>
        <Text size="3xl">{icon}</Text>
        <Stack gap={1}>
          <Text weight="medium" variant="high">{title}</Text>
          <Text size="xs" variant="med">{description}</Text>
          <Text size="xs" variant="low">
            {DateFormatter.formatShort(unlockedAt)}
          </Text>
        </Stack>
      </Group>
    </Card>
  );
}