import React from 'react';
import { Box } from '@/ui/Box';
import { Text } from '@/ui/Text';
import { Stack } from '@/ui/Stack';

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

const rarityColors = {
  common: 'border-gray-500 bg-gray-500/10',
  rare: 'border-blue-400 bg-blue-400/10',
  epic: 'border-purple-400 bg-purple-400/10',
  legendary: 'border-warning-amber bg-warning-amber/10'
};

export function AchievementCard({
  title,
  description,
  icon,
  unlockedAt,
  rarity,
}: AchievementCardProps) {
  return (
    <Box
      p={4}
      rounded="lg"
      border
      className={rarityColors[rarity]}
    >
      <Box display="flex" alignItems="start" gap={3}>
        <Text size="3xl">{icon}</Text>
        <Stack gap={1} flexGrow={1}>
          <Text weight="medium" color="text-white">{title}</Text>
          <Text size="xs" color="text-gray-400">{description}</Text>
          <Text size="xs" color="text-gray-500">
            {new Date(unlockedAt).toLocaleDateString('en-US', {
              month: 'short',
              day: 'numeric',
              year: 'numeric'
            })}
          </Text>
        </Stack>
      </Box>
    </Box>
  );
}