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-warning/30 bg-warning/5 hover:-translate-y-1 hover:shadow-xl' : 'opacity-80 grayscale hover:grayscale-0 hover:opacity-100'}`}
    >
      {/* Shine sweep animation for unlocked achievements */}
      {isUnlocked && (
        <div className="absolute inset-0 pointer-events-none overflow-hidden">
          <div className="absolute inset-0 -translate-x-full group-hover:translate-x-full transition-transform duration-700 bg-gradient-to-r from-transparent via-white/10 to-transparent skew-x-12" />
        </div>
      )}
      {isUnlocked && (
        <div className="absolute top-2 right-2 text-warning animate-pulse">
          <CheckCircle className="w-5 h-5" />
        </div>
      )}
      {!isUnlocked && (
        <div className="absolute top-2 right-2 text-muted-foreground">
          <Lock className="w-4 h-4" />
        </div>
      )}

      <div
        className={`flex ${compact ? 'flex-row items-center gap-4' : 'flex-col items-center text-center gap-4'}`}
      >
        <div
          className={`rounded-full bg-gradient-to-br from-kodo-graphite to-black flex items-center justify-center border-2 ${isUnlocked ? 'border-warning w-16 h-16 text-3xl shadow-gold-glow' : 'border-border w-12 h-12 text-xl text-muted-foreground'}`}
        >
          {achievement.icon}
        </div>

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

          {/* Progress */}
          <div className="w-full bg-card h-1.5 rounded-full overflow-hidden">
            <div
              className={`h-full transition-all duration-[var(--duration-slow)] ${isUnlocked ? 'bg-warning' : 'bg-muted'}`}
              style={{ width: `${percentage}%` }}
            ></div>
          </div>
          <div className="flex justify-between text-xs mt-1 font-mono">
            <span className={isUnlocked ? 'text-warning' : 'text-muted-foreground'}>
              {achievement.progress} / {achievement.maxProgress}
            </span>
            <span className="text-muted-foreground">+{achievement.xpReward} XP</span>
          </div>
        </div>
      </div>
    </Card>
  );
};