"use client";

import type { ReactNode } from "react";

import KatexRenderer from "@/components/math/KatexRenderer";

interface AnswerResultLineProps {
  expressionLatex: string;
  userAnswerLatex: string;
  correctAnswerLatex: string;
  correct: boolean;
  prefix?: ReactNode;
}

export default function AnswerResultLine({
  expressionLatex,
  userAnswerLatex,
  correctAnswerLatex,
  correct,
  prefix,
}: AnswerResultLineProps) {
  return (
    <li
      className={`flex flex-wrap items-center gap-x-2 gap-y-1 rounded-md px-4 py-3 text-lg font-semibold ring-1 ring-inset ${
        correct
          ? "bg-emerald-100 text-emerald-950 ring-emerald-200"
          : "bg-red-100 text-red-950 ring-red-200"
      }`}
    >
      {prefix}
      <KatexRenderer latex={expressionLatex} output="mathml" />
      <span aria-hidden="true">=</span>
      <span className={correct ? undefined : "text-red-700"}>
        <KatexRenderer latex={userAnswerLatex} output="mathml" />
      </span>
      {correct ? (
        <span
          aria-label="정답"
          role="img"
          className="inline-flex h-7 items-center text-2xl leading-none text-emerald-700"
        >
          ○
        </span>
      ) : (
        <>
          <span
            aria-label="오답"
            role="img"
            className="mr-2 inline-flex h-7 items-center text-2xl leading-none text-red-700"
          >
            ×
          </span>
          <span className="text-slate-700">
            (
            <span className="font-bold">
              <KatexRenderer latex={correctAnswerLatex} output="mathml" />
            </span>
            )
          </span>
        </>
      )}
    </li>
  );
}