import { Card } from '@/ui/Card';
import { Text } from '@/ui/Text';
import { Group } from '@/ui/Group';
import { DateDisplay } from '@/lib/display-objects/DateDisplay';

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>
        <Group direction="column" gap={1}>
          <Text weight="medium" variant="high">{title}</Text>
          <Text size="xs" variant="med">{description}</Text>
          <Text size="xs" variant="low">
            {DateDisplay.formatShort(unlockedAt)}
          </Text>
        </Group>
      </Group>
    </Card>
  );
}
