veza/apps/web/src/components/gamification/AchievementCard.tsx

import React from 'react';
import { Card } from '../ui/card';
import { Achievement } from '../../types';
import { Lock, CheckCircle } from 'lucide-react';

interface AchievementCardProps {
  achievement: Achievement;
  compact?: boolean;
}

export const AchievementCard: React.FC<AchievementCardProps> = ({
  achievement,
  compact = false,
}) => {
  const isUnlocked = achievement.progress >= achievement.maxProgress;
  const percentage = Math.min(
    100,
    (achievement.progress / achievement.maxProgress) * 100,
  );

  return (
    <Card
      variant={isUnlocked ? 'gaming' : 'default'}
      className={`relative overflow-hidden transition-all group ${isUnlocked ? 'border-kodo-gold/30 bg-kodo-gold/5' : 'opacity-80 grayscale hover:grayscale-0 hover:opacity-100'}`}
    >
      {isUnlocked && (
        <div className="absolute top-2 right-2 text-kodo-gold animate-pulse">
          <CheckCircle className="w-5 h-5" />
        </div>
      )}
      {!isUnlocked && (
        <div className="absolute top-2 right-2 text-kodo-content-dim">
          <Lock className="w-4 h-4" />
        </div>
      )}

      <div
        className={`flex ${compact ? 'flex-row items-center gap-4' : 'flex-col items-center text-center gap-3'}`}
      >
        <div
          className={`rounded-full bg-gradient-to-br from-kodo-graphite to-black flex items-center justify-center border-2 ${isUnlocked ? 'border-kodo-gold w-16 h-16 text-3xl shadow-[0_0_15px_rgba(234,179,8,0.3)]' : 'border-kodo-steel w-12 h-12 text-xl text-kodo-content-dim'}`}
        >
          {achievement.icon}
        </div>

        <div className="flex-1 min-w-0">
          <h4
            className={`font-bold truncate ${isUnlocked ? 'text-white' : 'text-kodo-content-dim'}`}
          >
            {achievement.name}
          </h4>
          <p className="text-xs text-kodo-content-dim line-clamp-2 mb-2">
            {achievement.description}
          </p>

          {/* Progress */}
          <div className="w-full bg-kodo-graphite h-1.5 rounded-full overflow-hidden">
            <div
              className={`h-full transition-all duration-500 ${isUnlocked ? 'bg-kodo-gold' : 'bg-kodo-steel'}`}
              style={{ width: `${percentage}%` }}
            ></div>
          </div>
          <div className="flex justify-between text-[10px] mt-1 font-mono">
            <span className={isUnlocked ? 'text-kodo-gold' : 'text-kodo-content-dim'}>
              {achievement.progress} / {achievement.maxProgress}
            </span>
            <span className="text-kodo-cyan">+{achievement.xpReward} XP</span>
          </div>
        </div>
      </div>
    </Card>
  );
};