"use client";

import { useState } from "react";

import { ChevronDownIcon, SparklesIcon } from "@/components/icons";
import { useI18n } from "@/lib/i18n";
import { cn } from "@/lib/utils";

/**
 * Reasoning models stream `thinking` separately from the answer. It is hidden
 * by default behind this row — the answer itself is never the raw reasoning.
 */
export function ThinkingRow({ thinking, streaming }: { thinking: string; streaming?: boolean }) {
  const { t } = useI18n();
  const [open, setOpen] = useState(false);

  return (
    <div className="rounded-2xl border border-[var(--hairline-soft)] bg-[var(--surface-sunken)]">
      <button
        type="button"
        onClick={() => setOpen((value) => !value)}
        aria-expanded={open}
        className="flex w-full items-center gap-2 px-3 py-2 text-left text-[12.5px] font-medium text-[var(--text-muted)] transition hover:text-[var(--text)]"
      >
        <SparklesIcon className={cn("size-3.5 shrink-0", streaming && "animate-pulse")} />
        <span>{streaming ? t("chat.thinking") : t("chat.thought")}</span>
        <ChevronDownIcon className={cn("ml-auto size-4 transition-transform", open && "rotate-180")} />
      </button>
      {open ? (
        <div className="whitespace-pre-wrap break-words px-3 pb-3 text-[12.5px] leading-relaxed text-[var(--text-subtle)]">
          {thinking}
        </div>
      ) : null}
    </div>
  );
}