import { RotateCcw, Trophy } from 'lucide-react';
import type { GameStatus } from '../types';

type GameOverPanelProps = {
  status: GameStatus;
  target: string;
  isPracticeAvailable: boolean;
  onRestart: () => void;
  onPractice: () => void;
};

export function GameOverPanel({ status, target, isPracticeAvailable, onRestart, onPractice }: GameOverPanelProps) {
  if (status === 'playing') return null;

  const won = status === 'won';

  return (
    <div className="rounded-lg border border-rose-500/30 bg-slate-950/95 p-4 shadow-ember">
      <div className="flex items-start gap-3">
        <div className="grid h-10 w-10 shrink-0 place-items-center rounded-md bg-rose-500/20 text-rose-200">
          <Trophy size={20} />
        </div>
        <div>
          <h2 className="text-lg font-black text-slate-100">{won ? 'You survived.' : 'The word won.'}</h2>
          <p className="mt-1 text-sm text-slate-400">
            Target word: <span className="font-black uppercase text-rose-200">{target}</span>
          </p>
        </div>
      </div>

      <div className="mt-4 flex flex-wrap gap-2">
        <button
          className="inline-flex items-center gap-2 rounded-md bg-rose-500 px-4 py-2 text-sm font-black text-white hover:bg-rose-400"
          onClick={onRestart}
          type="button"
        >
          <RotateCcw size={16} />
          Play again
        </button>
        {isPracticeAvailable && (
          <button
            className="rounded-md border border-slate-700 px-4 py-2 text-sm font-black text-slate-100 hover:border-slate-500"
            onClick={onPractice}
            type="button"
          >
            Practice round
          </button>
        )}
      </div>
    </div>
  );
}
