"use client";

import { useState } from "react";

import { CheckCircleIcon, CopyIcon, XCircleIcon } from "@/components/icons";
import { copyText } from "@/lib/clipboard";
import { useI18n } from "@/lib/i18n";
import { cn } from "@/lib/utils";

/** Small square copy control used by chat message actions and code blocks. */
export function CopyIconButton({ text, className }: { text: string; className?: string }) {
  const { t } = useI18n();
  const [state, setState] = useState<"idle" | "copied" | "failed">("idle");

  return (
    <button
      type="button"
      aria-label={t("chat.copy")}
      title={state === "copied" ? t("chat.copied") : state === "failed" ? t("chat.copyFailed") : t("chat.copy")}
      onClick={async () => {
        const ok = await copyText(text);
        setState(ok ? "copied" : "failed");
        window.setTimeout(() => setState("idle"), 1800);
      }}
      className={cn(
        "grid size-9 shrink-0 place-items-center rounded-[var(--radius-chip)] border border-[var(--glass-border)] bg-[var(--surface-strong)] text-[var(--text-muted)] transition hover:bg-[var(--hover)] hover:text-[var(--text)]",
        className,
      )}
    >
      {state === "copied" ? (
        <CheckCircleIcon className="size-4 text-emerald-500" />
      ) : state === "failed" ? (
        <XCircleIcon className="size-4 text-rose-500" />
      ) : (
        <CopyIcon className="size-4" />
      )}
    </button>
  );
}