"use client";

import { Check, Copy } from "lucide-react";
import { useState } from "react";
import { Tab, TabList, TabPanel, Tabs } from "@/components/ui/tabs";

const LANGS = [
  { key: "curl", label: "curl" },
  { key: "js", label: "JavaScript" },
  { key: "python", label: "Python" },
] as const;

/** curl / JS / Python example tabs with a copy button; the pre scrolls inside its box, never the page. */
export function CodeTabs({ example, id }: { example: { curl: string; js: string; python: string }; id: string }) {
  const [tab, setTab] = useState<string>("curl");
  const [copied, setCopied] = useState(false);
  const text = example[tab as keyof typeof example] ?? example.curl;
  const copy = async () => {
    try {
      await navigator.clipboard.writeText(text);
      setCopied(true);
      setTimeout(() => setCopied(false), 1800);
    } catch {
      window.prompt("Copy", text);
    }
  };
  return (
    <Tabs value={tab} onValueChange={setTab} className="min-w-0">
      <div className="flex items-end justify-between gap-2">
        <TabList label={`Code examples for ${id}`} className="min-w-0 flex-1">
          {LANGS.map((l) => (
            <Tab key={l.key} value={l.key} className="h-10 min-w-[44px] text-[12px] sm:h-9">
              {l.label}
            </Tab>
          ))}
        </TabList>
        <button type="button" onClick={() => void copy()} className="inline-flex h-10 shrink-0 items-center gap-1 rounded-sm border border-hair px-2.5 text-[11.5px] text-ink-2 hover:bg-surface-2 hover:text-ink sm:h-9" aria-label={`Copy ${tab} example`}>
          {copied ? <Check className="size-3.5 text-ok" aria-hidden /> : <Copy className="size-3.5" aria-hidden />} {copied ? "Copied" : "Copy"}
        </button>
      </div>
      {LANGS.map((l) => (
        <TabPanel key={l.key} value={l.key} className="pt-2">
          <pre className="figure max-w-full overflow-x-auto whitespace-pre rounded-sm border border-hair bg-surface-2 px-3 py-2.5 text-[12px] leading-relaxed text-ink-2">{example[l.key]}</pre>
        </TabPanel>
      ))}
    </Tabs>
  );
}