import React from 'react';
import { Trophy, Medal, Star, Crown, Target, Zap } from 'lucide-react';
import type { DriverProfileAchievementViewModel } from '@/lib/view-models/DriverProfileViewModel';

interface AchievementCardProps {
  achievement: DriverProfileAchievementViewModel;
}

function getRarityColor(rarity: DriverProfileAchievementViewModel['rarity']) {
  switch (rarity) {
    case 'common':
      return 'text-gray-400 bg-gray-400/10 border-gray-400/30';
    case 'rare':
      return 'text-primary-blue bg-primary-blue/10 border-primary-blue/30';
    case 'epic':
      return 'text-purple-400 bg-purple-400/10 border-purple-400/30';
    case 'legendary':
      return 'text-yellow-400 bg-yellow-400/10 border-yellow-400/30';
  }
}

function getAchievementIcon(icon: DriverProfileAchievementViewModel['icon']) {
  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;
  }
}

export default function AchievementCard({ achievement }: AchievementCardProps) {
  const Icon = getAchievementIcon(achievement.icon);
  const rarityClasses = getRarityColor(achievement.rarity);

  return (
    <div className={`p-4 rounded-xl border ${rarityClasses} transition-all hover:scale-105`}>
      <div className="flex items-start gap-3">
        <div className={`flex h-10 w-10 items-center justify-center rounded-lg ${rarityClasses.split(' ')[1]}`}>
          <Icon className={`w-5 h-5 ${rarityClasses.split(' ')[0]}`} />
        </div>
        <div className="flex-1 min-w-0">
          <p className="text-white font-semibold text-sm">{achievement.title}</p>
          <p className="text-gray-400 text-xs mt-0.5">{achievement.description}</p>
          <p className="text-gray-500 text-xs mt-1">
            {new Date(achievement.earnedAt).toLocaleDateString('en-US', {
              month: 'short',
              day: 'numeric',
              year: 'numeric',
            })}
          </p>
        </div>
      </div>
    </div>
  );
}