"use client";

import { useState } from "react";

import { Button } from "@/components/ui";
import { copyText } from "@/lib/clipboard";
import { useI18n } from "@/lib/i18n";
import { cn } from "@/lib/utils";

/** Copy-to-clipboard with a short “Copied!” state and a manual fallback note. */
export function CopyButton({ text, className }: { text: string; className?: string }) {
  const { t } = useI18n();
  const [state, setState] = useState<"idle" | "copied" | "failed">("idle");

  const copy = async () => {
    const ok = await copyText(text);
    setState(ok ? "copied" : "failed");
    window.setTimeout(() => setState("idle"), 2200);
  };

  return (
    <span className={cn("inline-flex flex-col items-start gap-1", className)}>
      <Button className="touch-target" onClick={() => void copy()}>
        {state === "copied" ? t("homework.result.copied") : t("homework.result.copy")}
      </Button>
      {state === "failed" ? (
        <span role="status" className="text-[12px] text-rose-700 dark:text-rose-300">
          {t("homework.result.copyFailed")}
        </span>
      ) : null}
    </span>
  );
}