'use client';

import React from 'react';
import { Award, Trophy, Medal, Star, Crown, Target, Zap } from 'lucide-react';
import { Card } from '@/ui/Card';
import { Heading } from '@/ui/Heading';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Surface } from '@/ui/Surface';
import { Icon } from '@/ui/Icon';
import { Grid } from '@/ui/Grid';

interface Achievement {
  id: string;
  title: string;
  description: string;
  icon: string;
  rarity: string;
  earnedAt: Date;
}

interface AchievementGridProps {
  achievements: Achievement[];
}

function getAchievementIcon(icon: string) {
  switch (icon) {
    case 'trophy': return Trophy;
    case 'medal': return Medal;
    case 'star': return Star;
    case 'crown': return Crown;
    case 'target': return Target;
    case 'zap': return Zap;
    default: return Award;
  }
}

export function AchievementGrid({ achievements }: AchievementGridProps) {
  return (
    <Card>
      <Box mb={4}>
        <Stack direction="row" align="center" justify="between">
          <Heading level={2} icon={<Icon icon={Award} size={5} color="#facc15" />}>
            Achievements
          </Heading>
          <Text size="sm" color="text-gray-500" weight="normal">{achievements.length} earned</Text>
        </Stack>
      </Box>
      <Grid cols={1} gap={4}>
        {achievements.map((achievement) => {
          const AchievementIcon = getAchievementIcon(achievement.icon);
          return (
            <Surface
              key={achievement.id}
              variant="muted"
              rounded="xl"
              border
              padding={4}
            >
              <Stack direction="row" align="start" gap={3}>
                <Surface variant="muted" rounded="lg" padding={3}>
                  <Icon icon={AchievementIcon} size={5} color="#facc15" />
                </Surface>
                <Box>
                  <Text weight="semibold" size="sm" color="text-white" block>{achievement.title}</Text>
                  <Text size="xs" color="text-gray-400" block mt={1}>{achievement.description}</Text>
                  <Text size="xs" color="text-gray-500" block mt={2}>
                    {achievement.earnedAt.toLocaleDateString('en-US', {
                      month: 'short',
                      day: 'numeric',
                      year: 'numeric',
                    })}
                  </Text>
                </Box>
              </Stack>
            </Surface>
          );
        })}
      </Grid>
    </Card>
  );
}