// Adapted from Kibo UI (MIT), with owned React/CSS APIs. See THIRD_PARTY_NOTICES.md.
"use client";
import { useState, type ComponentProps } from "react";
import { Tabs } from "./_ynrlib/radix-ui.js";
export interface SnippetItem {
  label: string;
  value: string;
  code: string;
}
export type SnippetProps = Omit<ComponentProps<"div">, "defaultValue"> & {
  items: readonly SnippetItem[];
  label?: string;
  defaultValue?: string;
};
export function Snippet({
  items,
  label = "Command format",
  defaultValue,
  className = "",
  ...props
}: SnippetProps) {
  const [selected, setSelected] = useState(
    defaultValue ?? items[0]?.value ?? "",
  );
  const [status, setStatus] = useState("");
  const active = items.find((item) => item.value === selected) ?? items[0];
  return (
    <div className={`ynr-snippet ${className}`} {...props}>
      {active ? (
        <Tabs.Root
          value={active.value}
          onValueChange={(next) => {
            setSelected(next);
            setStatus("");
          }}
        >
          <div className="ynr-snippet-header">
            <Tabs.List aria-label={label}>
              {items.map((item) => (
                <Tabs.Trigger key={item.value} value={item.value}>
                  {item.label}
                </Tabs.Trigger>
              ))}
            </Tabs.List>
            <button
              type="button"
              onClick={async () => {
                try {
                  await navigator.clipboard.writeText(active.code);
                  setStatus("Copied");
                } catch {
                  setStatus("Copy unavailable. Select the code to copy.");
                }
              }}
            >
              Copy command
            </button>
          </div>
          {items.map((item) => (
            <Tabs.Content key={item.value} value={item.value}>
              <pre>
                <code>{item.code}</code>
              </pre>
            </Tabs.Content>
          ))}
        </Tabs.Root>
      ) : (
        <p>No commands.</p>
      )}
      <span role="status">{status}</span>
    </div>
  );
}