"use client";

import { Button } from "@aur-ui/ui/components/button";
import {
  ArrowRight,
  CheckCircle2,
  Filter,
  MoreHorizontal,
  Plus,
  Search,
  Settings2,
  Trash2,
  X,
} from "lucide-react";
import type { ReactNode } from "react";

function DemoGroup({
  label,
  children,
}: {
  label: string;
  children: ReactNode;
}) {
  return (
    <section className="flex flex-col gap-2">
      <h3 className="text-xs font-semibold text-ink-400 uppercase">{label}</h3>
      <div className="flex flex-wrap items-center gap-2">{children}</div>
    </section>
  );
}

export default function ButtonDemo() {
  return (
    <div className="flex w-full flex-col gap-6">
      <DemoGroup label="Actions">
        <Button>
          <Plus />
          New project
        </Button>
        <Button variant="secondary">Invite team</Button>
        <Button variant="neutral">Save draft</Button>
        <Button variant="outline">View details</Button>
        <Button variant="ghost">Cancel</Button>
        <Button variant="quiet">Reset</Button>
        <Button variant="link">
          Audit log
          <ArrowRight />
        </Button>
      </DemoGroup>

      <DemoGroup label="Status">
        <Button variant="positive">
          <CheckCircle2 />
          Approve
        </Button>
        <Button variant="positive-soft">Mark healthy</Button>
        <Button variant="warning">Pause routing</Button>
        <Button variant="warning-soft">Needs review</Button>
        <Button variant="destructive">
          <Trash2 />
          Delete
        </Button>
        <Button variant="destructive-soft">Revoke key</Button>
      </DemoGroup>

      <DemoGroup label="Toolbar">
        <Button variant="toolbar" size="toolbar">
          <Search />
          Search
        </Button>
        <Button variant="toolbar" size="toolbar">
          <Filter />
          Filter
        </Button>
        <Button variant="toolbar" size="toolbar">
          <Settings2 />
          Columns
        </Button>
        <Button variant="header" size="header">
          Updated
          <ArrowRight />
        </Button>
        <Button variant="chip" size="chip">
          Staging
        </Button>
        <Button variant="chip-active" size="chip">
          Production
        </Button>
      </DemoGroup>

      <DemoGroup label="Sizes">
        <Button size="xs">XS</Button>
        <Button size="sm">Small</Button>
        <Button>Default</Button>
        <Button size="lg">Large</Button>
        <Button size="xl">Extra large</Button>
        <Button variant="pill-primary">Open dashboard</Button>
        <Button variant="pill-secondary">Learn more</Button>
      </DemoGroup>

      <DemoGroup label="Icons">
        <Button variant="quiet" size="icon-xs" aria-label="Clear">
          <X />
        </Button>
        <Button variant="header-icon" size="icon-header" aria-label="Columns">
          <Filter />
        </Button>
        <Button variant="ghost" size="icon-sm" aria-label="More actions">
          <MoreHorizontal />
        </Button>
        <Button variant="outline" size="icon" aria-label="Settings">
          <Settings2 />
        </Button>
        <Button variant="default" size="icon-lg" aria-label="Create">
          <Plus />
        </Button>
        <Button variant="destructive-soft" size="icon-sm" aria-label="Delete">
          <Trash2 />
        </Button>
      </DemoGroup>

      <DemoGroup label="State">
        <Button loading>Provisioning</Button>
        <Button disabled>Disabled</Button>
        <Button variant="outline" aria-invalid>
          Invalid
        </Button>
      </DemoGroup>
    </div>
  );
}