import type { Achievement } from '../data';
import { Trophy, Calendar } from 'lucide-react';
import { useLang } from '../context/LanguageContext';

interface AchievementCardProps {
  achievement: Achievement;
  onReadMore: (achievement: Achievement) => void;
}

export default function AchievementCard({ achievement, onReadMore }: AchievementCardProps) {
  const { t } = useLang();

  return (
    <article className="bg-white rounded-lg overflow-hidden group hover:-translate-y-1 transition-all duration-300 shadow-md hover:shadow-xl border border-slate-200 flex flex-col h-full relative">
      <div className="absolute top-0 left-0 w-full h-1 bg-primary-navy z-10 group-hover:bg-primary-gold transition-colors"></div>

      <div className="relative h-56 overflow-hidden bg-slate-100">
        <img
          src={achievement.image}
          alt={achievement.title}
          className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
          referrerPolicy="no-referrer"
          onError={(e) => {
            (e.target as HTMLImageElement).src = 'https://placehold.co/800x600/003150/FDB813?text=Informatika+UNTAN';
          }}
        />
        <div className="absolute top-3 left-3 bg-white/95 backdrop-blur text-primary-navy font-bold px-3 py-1 rounded shadow-sm flex items-center gap-1.5 text-xs">
          <Trophy size={14} className="text-primary-gold" />
          {achievement.rank}
        </div>
      </div>

      <div className="p-6 flex flex-col flex-grow">
        <div className="flex items-center gap-3 mb-3">
          <span className="text-untan-blue text-xs font-bold uppercase tracking-wider">
            {achievement.category}
          </span>
          <span className="text-slate-400 text-xs font-medium flex items-center gap-1 border-l border-slate-300 pl-3">
            <Calendar size={12} />
            {achievement.year}
          </span>
        </div>

        <h3 className="text-xl font-bold font-display text-primary-navy mb-3 leading-snug group-hover:text-untan-blue transition-colors">
          {achievement.title}
        </h3>

        <p className="text-slate-600 text-sm leading-relaxed mb-6 line-clamp-3">
          {achievement.description}
        </p>

        <div className="mt-auto border-t border-slate-100 pt-4">
          <div className="flex justify-between items-center mb-4">
            <div className="flex items-center gap-3">
              <div className="w-8 h-8 rounded bg-primary-navy/5 flex items-center justify-center text-primary-navy font-bold text-xs ring-1 ring-primary-navy/10">
                {achievement.avatar}
              </div>
              <div>
                <span className="font-bold text-slate-800 block text-sm">{achievement.team}</span>
                <span className="text-slate-500 block text-xs">{achievement.generation}</span>
              </div>
            </div>
            <span className="bg-slate-100 text-slate-600 text-[10px] px-2 py-1 rounded font-bold uppercase tracking-wide">
              {achievement.level}
            </span>
          </div>

          <button
            onClick={() => onReadMore(achievement)}
            className="w-full py-2.5 rounded bg-primary-navy/5 text-primary-navy font-bold hover:bg-primary-navy hover:text-white transition-all duration-300 text-sm min-h-[44px]"
          >
            {t.achievement.readMore}
          </button>
        </div>
      </div>
    </article>
  );
}