"use client";

import Link from "next/link";
import { useEffect, useRef } from "react";

interface ScoreSummaryProps {
  correctCount: number;
  totalCount: number;
  onRestart: () => void;
}

export default function ScoreSummary({
  correctCount,
  totalCount,
  onRestart,
}: ScoreSummaryProps) {
  const restartButtonRef = useRef<HTMLButtonElement>(null);

  useEffect(() => {
    restartButtonRef.current?.focus();
  }, []);

  return (
    <main className="flex min-h-screen items-center bg-slate-50 px-6 py-12 text-slate-950">
      <section className="mx-auto flex w-full max-w-3xl flex-col gap-8">
        <div className="space-y-3">
          <p className="text-sm font-semibold text-emerald-700">
            괄호 음수 분배
          </p>
          <h1 className="text-4xl font-bold tracking-normal sm:text-5xl">
            풀이 결과
          </h1>
          <p className="text-xl font-semibold text-slate-800">
            {correctCount} / {totalCount} 정답
          </p>
        </div>

        <div className="flex flex-wrap gap-3">
          <button
            ref={restartButtonRef}
            type="button"
            onClick={onRestart}
            className="inline-flex h-12 items-center justify-center rounded-md bg-emerald-700 px-6 text-base font-semibold text-white transition hover:bg-emerald-800 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2"
          >
            다시 시작
          </button>
          <Link
            href="/"
            className="inline-flex h-12 items-center justify-center rounded-md border border-slate-300 px-6 text-base font-semibold text-slate-800 transition hover:bg-white focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2"
          >
            처음으로
          </Link>
        </div>
      </section>
    </main>
  );
}