Button

import { ArrowRight, Plus } from "lucide-react";

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

const VARIANTS = [
  "primary",
  "secondary",
  "destructive",
  "outline",
  "ghost",
  "link",
] as const;

/**
 * Live Button example — the documented variant / size / state matrix, rendered
 * with the real component so the page doubles as a visual check.
 */
export function ButtonShowcase() {
  return (
    <div className="flex flex-col gap-8">
      <section className="flex flex-col gap-3">
        <h3 className="text-sm font-medium leading-snug text-muted-foreground">
          Variants
        </h3>
        <div className="flex flex-wrap items-center gap-3">
          {VARIANTS.map((variant) => (
            <Button key={variant} variant={variant}>
              {variant[0].toUpperCase() + variant.slice(1)}
            </Button>
          ))}
        </div>
      </section>

      <section className="flex flex-col gap-3">
        <h3 className="text-sm font-medium leading-snug text-muted-foreground">
          Sizes
        </h3>
        <div className="flex flex-wrap items-center gap-3">
          <Button size="sm">Small</Button>
          <Button size="default">Default</Button>
          <Button size="lg">Large</Button>
          <Button size="icon" aria-label="Add" leadingIcon={<Plus />} />
        </div>
      </section>

      <section className="flex flex-col gap-3">
        <h3 className="text-sm font-medium leading-snug text-muted-foreground">
          Icons &amp; states
        </h3>
        <div className="flex flex-wrap items-center gap-3">
          <Button leadingIcon={<Plus />}>Leading icon</Button>
          <Button variant="secondary" trailingIcon={<ArrowRight />}>
            Trailing icon
          </Button>
          <Button disabled>Disabled</Button>
          <Button loading>Loading</Button>
          <Button variant="outline" loading leadingIcon={<Plus />}>
            Saving
          </Button>
        </div>
      </section>
    </div>
  );
}