"use client";

import KatexRenderer from "@/components/math/KatexRenderer";
import type { GradeResult } from "@/lib/engine/types";

interface FeedbackPanelProps {
  result: GradeResult;
  answerLatex: string;
  isLastProblem: boolean;
  onNext: () => void;
}

export default function FeedbackPanel({
  result,
  answerLatex,
  isLastProblem,
  onNext,
}: FeedbackPanelProps) {
  return (
    <div
      className={`rounded-md p-6 shadow-sm ring-1 ${
        result.correct
          ? "bg-emerald-50 text-emerald-950 ring-emerald-200"
          : "bg-red-50 text-red-950 ring-red-200"
      }`}
    >
      <p className="text-lg font-bold">
        {result.correct ? "정답입니다." : "오답입니다."}
      </p>
      <div className="mt-3 text-xl font-semibold">
        <KatexRenderer latex={answerLatex} />
      </div>
      <button
        type="button"
        onClick={onNext}
        className="mt-5 inline-flex h-11 items-center justify-center rounded-md bg-slate-950 px-5 text-base font-semibold text-white transition hover:bg-slate-800 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2"
      >
        {isLastProblem ? "결과 보기" : "다음 문제"}
      </button>
    </div>
  );
}