Button

import {
  ArrowRightIcon,
  CheckIcon,
  CopyIcon,
  DownloadIcon,
  LoaderCircleIcon,
  PlayIcon,
  PlusIcon,
  SettingsIcon,
  Trash2Icon,
} from "lucide-react"

import { Button } from "@/components/ui/button"

const sections = [
  {
    title: "Primary buttons",
    description: "Use once per surface for the main agent action.",
    items: [
      <Button key="primary-sm" size="sm">
        Small
      </Button>,
      <Button key="primary">Button</Button>,
      <Button key="primary-lg" size="lg">
        Large button
      </Button>,
    ],
  },
  {
    title: "Secondary buttons",
    description: "Neutral supporting actions inside the same workflow.",
    items: [
      <Button key="secondary-sm" size="sm" variant="secondary">
        Small
      </Button>,
      <Button key="secondary" variant="secondary">
        Button
      </Button>,
      <Button key="secondary-lg" size="lg" variant="secondary">
        Large button
      </Button>,
    ],
  },
  {
    title: "Outline buttons",
    description: "Utility actions such as copy, rotate, and settings.",
    items: [
      <Button key="outline-sm" size="sm" variant="outline">
        Small
      </Button>,
      <Button key="outline" variant="outline">
        Button
      </Button>,
      <Button key="outline-lg" size="lg" variant="outline">
        Large button
      </Button>,
    ],
  },
  {
    title: "Soft buttons",
    description: "Low-intensity ZGI Blue actions for empty states and hints.",
    items: [
      <Button key="soft-sm" size="sm" variant="soft">
        Small
      </Button>,
      <Button key="soft" variant="soft">
        Button
      </Button>,
      <Button key="soft-lg" size="lg" variant="soft">
        Large button
      </Button>,
    ],
  },
  {
    title: "Buttons with leading icon",
    description: "Use when the icon clarifies a command.",
    items: [
      <Button key="leading-primary">
        <PlusIcon className="size-4" />
        New agent
      </Button>,
      <Button key="leading-outline" variant="outline">
        <CopyIcon className="size-4" />
        Copy key
      </Button>,
      <Button key="leading-secondary" variant="secondary">
        <SettingsIcon className="size-4" />
        Configure
      </Button>,
    ],
  },
  {
    title: "Buttons with trailing icon",
    description: "Use for forward motion, deploys, and external flows.",
    items: [
      <Button key="trailing-primary">
        Deploy
        <ArrowRightIcon className="size-4" />
      </Button>,
      <Button key="trailing-outline" variant="outline">
        Export
        <DownloadIcon className="size-4" />
      </Button>,
      <Button key="trailing-soft" variant="soft">
        Run agent
        <PlayIcon className="size-4" />
      </Button>,
    ],
  },
  {
    title: "Icon buttons",
    description: "Compact toolbar actions. Always provide an accessible label.",
    items: [
      <Button key="icon-primary" size="icon" aria-label="Run agent">
        <PlayIcon className="size-4" />
      </Button>,
      <Button
        key="icon-outline"
        size="icon"
        variant="outline"
        aria-label="Settings"
      >
        <SettingsIcon className="size-4" />
      </Button>,
      <Button key="icon-ghost" size="icon" variant="ghost" aria-label="Copy">
        <CopyIcon className="size-4" />
      </Button>,
      <Button
        key="icon-danger"
        size="icon"
        variant="destructive"
        aria-label="Delete"
      >
        <Trash2Icon className="size-4" />
      </Button>,
    ],
  },
  {
    title: "States",
    description: "Show progress and destructive actions without changing size.",
    items: [
      <Button key="loading" disabled>
        <LoaderCircleIcon className="size-4 animate-spin" />
        Deploying
      </Button>,
      <Button key="complete" variant="secondary">
        <CheckIcon className="size-4" />
        Synced
      </Button>,
      <Button key="danger" variant="destructive">
        <Trash2Icon className="size-4" />
        Revoke key
      </Button>,
      <Button key="link" variant="link" className="px-0">
        Read guide
      </Button>,
    ],
  },
]

export function ButtonDemo() {
  return (
    <div className="w-full max-w-3xl overflow-hidden rounded-lg border bg-white shadow-[0_12px_40px_rgba(10,11,13,0.06)]">
      {sections.map((section) => (
        <section
          key={section.title}
          className="grid gap-3 border-b p-4 last:border-b-0 sm:grid-cols-[190px_minmax(0,1fr)]"
        >
          <div>
            <h3 className="text-sm font-semibold">{section.title}</h3>
            <p className="text-muted-foreground mt-1 text-xs leading-5">
              {section.description}
            </p>
          </div>
          <div className="flex min-w-0 flex-wrap items-center gap-2">
            {section.items}
          </div>
        </section>
      ))}
    </div>
  )
}