"use client";

import { Button } from "@/components/ui";
import { useI18n } from "@/lib/i18n";
import type { HomeworkMakeRecord } from "@/lib/schemas";

import { CopyButton } from "./CopyButton";

/** Mode 1 result: the finished homework, nothing else. */
export function HomeworkResult({
  record,
  onAgain,
  onNew,
  againLoading,
}: {
  record: HomeworkMakeRecord;
  onAgain: () => void;
  onNew: () => void;
  againLoading: boolean;
}) {
  const { t } = useI18n();

  return (
    <div className="space-y-5">
      <header className="space-y-1">
        <p className="text-[11px] font-semibold uppercase tracking-wider text-[var(--text-subtle)]">
          {t("homework.result.title")}
        </p>
        <h1 className="text-[22px] font-semibold leading-tight tracking-[-0.02em] text-[var(--text)] text-balance">
          {record.title}
        </h1>
      </header>

      <article className="card p-4 sm:p-5">
        <p className="whitespace-pre-wrap break-words text-[15px] leading-relaxed text-[var(--text)]">
          {record.answer}
        </p>
      </article>

      <div className="flex flex-wrap items-start gap-2">
        <CopyButton text={record.answer} />
        <Button variant="secondary" className="touch-target" onClick={onAgain} loading={againLoading}>
          {t("homework.result.again")}
        </Button>
        <Button variant="ghost" className="touch-target" onClick={onNew}>
          {t("homework.result.new")}
        </Button>
      </div>
    </div>
  );
}