Thinking

"use client";

import { useState } from "react";
import {
  Thinking,
  ThinkingActivity,
  ThinkingContent,
  type ThinkingStatus,
  ThinkingTrigger,
} from "@/components/ui/thinking";

const copy: Record<ThinkingStatus, { summary: string; duration: string; label: string }> = {
  thinking: { summary: "Checking the component interface and useful states.", duration: "1.8s", label: "Live" },
  complete: { summary: "The component contract is ready to review.", duration: "3.4s", label: "Complete" },
  error: { summary: "The registry build stopped before validation.", duration: "2.6s", label: "Error" },
};

export default function ThinkingDemo() {
  const [status, setStatus] = useState<ThinkingStatus>("thinking");

  return (
    <div className="flex min-h-[360px] w-full items-center justify-center p-6">
      <div className="grid w-full max-w-[520px] gap-3">
        <div
          role="radiogroup"
          aria-label="Thinking status"
          className="inline-flex justify-self-center rounded-full bg-muted p-0.5"
        >
          {(Object.keys(copy) as ThinkingStatus[]).map((value) => (
            <button
              key={value}
              type="button"
              role="radio"
              aria-checked={status === value}
              onClick={() => setStatus(value)}
              className="h-7 rounded-full px-3 text-xs font-medium text-muted-foreground transition-[background-color,color] duration-150 hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring aria-checked:bg-background aria-checked:text-foreground aria-checked:shadow-sm"
            >
              {copy[value].label}
            </button>
          ))}
        </div>
        <Thinking variant="card" status={status} defaultOpen>
          <ThinkingTrigger summary={copy[status].summary} duration={copy[status].duration} />
          <ThinkingContent>
            <ThinkingActivity type="search" query="Thinking component accessibility" elapsed="0.3s">
              Found the component contract
            </ThinkingActivity>
            <ThinkingActivity type="file" path="src/components/ui/thinking.tsx" elapsed="0.8s">
              Read the public interface
            </ThinkingActivity>
            <ThinkingActivity
              type="tool"
              tool="npm run build"
              elapsed={status === "thinking" ? undefined : status === "complete" ? "3.4s" : "2.6s"}
            >
              {status === "error" ? "Build failed" : "Checked the build output"}
            </ThinkingActivity>
          </ThinkingContent>
        </Thinking>
      </div>
    </div>
  );
}