Button

"use client";

import { Button, Tooltip } from "@waveinno/ui";
import { ArrowRight, Download, Plus, Sparkles, Trash2 } from "lucide-react";

export default function ButtonExample() {
  return (
    <div className="space-y-5">
      <div className="flex flex-wrap items-center gap-2">
        <Button variant="primary">
          <Plus /> Primary
        </Button>
        <Button>Secondary</Button>
        <Button variant="subtle">Subtle</Button>
        <Button variant="ghost">Ghost</Button>
        <Button variant="danger">
          <Trash2 /> Danger
        </Button>
        <Button variant="link">Link</Button>
      </div>
      <div className="flex flex-wrap items-center gap-2.5">
        <Button variant="gradient">
          <Sparkles /> Gradient
        </Button>
        <Button variant="glow">Glow</Button>
        <Button variant="dark">Dark</Button>
        <Button variant="outline">Outline</Button>
        <Button variant="elevated">Elevated</Button>
      </div>
      <div className="flex flex-wrap items-center gap-2.5">
        <Button variant="gradient" size="xl" shape="pill">
          Start free <ArrowRight />
        </Button>
        <Button variant="elevated" size="xl" shape="pill">
          Book a demo
        </Button>
      </div>
      {/* Glass and white are for heroes: a rich backdrop with light in it. */}
      <div className="relative isolate overflow-hidden rounded-[18px] bg-[#0f0a2e] px-6 py-10 sm:px-10">
        <div className="absolute -left-16 -top-20 -z-10 size-72 rounded-full bg-[#1437d3] opacity-70 blur-3xl" />
        <div className="absolute -bottom-24 right-0 -z-10 size-80 rounded-full bg-[#7560fd] opacity-60 blur-3xl" />
        <div className="absolute inset-0 -z-10 bg-[radial-gradient(rgba(255,255,255,.08)_1px,transparent_1px)] [background-size:18px_18px] [mask-image:linear-gradient(180deg,black,transparent)]" />
        <p className="text-[11px] font-semibold uppercase tracking-[0.14em] text-white/60">ParkingOS for owners</p>
        <p className="disp mt-2 max-w-md text-[26px] font-semibold leading-tight text-white">Every car park you run, on one screen.</p>
        <div className="mt-6 flex flex-wrap items-center gap-3">
          <Button variant="white" size="lg" shape="pill">
            Start free <ArrowRight />
          </Button>
          <Button variant="glass" size="lg" shape="pill">
            Watch the tour
          </Button>
          <Button variant="glass" size="icon" shape="pill" aria-label="Download">
            <Download />
          </Button>
        </div>
      </div>
      <div className="flex flex-wrap items-center gap-2">
        <Button size="sm">Small</Button>
        <Button>Default</Button>
        <Button size="lg">Large</Button>
        <Tooltip label="Export CSV" shortcut="E">
          <Button size="icon" aria-label="Export">
            <Download />
          </Button>
        </Tooltip>
        <Button loading>Saving</Button>
        <Button disabled>Disabled</Button>
      </div>
    </div>
  );
}