Steps

"use client";

import { Button, Steps } from "@waveinno/ui";
import { Building2, DoorOpen, ShieldCheck, Wallet } from "lucide-react";
import * as React from "react";

const SETUP = [
  { title: "Your site", description: "Name and address" },
  { title: "Gates", description: "Connect the controllers" },
  { title: "Rates", description: "What cars and bikes pay" },
  { title: "Go live", description: "Open the gates" },
];

export default function StepsDemo() {
  const [step, setStep] = React.useState(2);
  return (
    <div className="space-y-8">
      <div className="flex flex-wrap items-center gap-2">
        <Button size="sm" variant="secondary" onClick={() => setStep((s) => Math.max(0, s - 1))}>
          Back
        </Button>
        <Button size="sm" onClick={() => setStep((s) => Math.min(SETUP.length, s + 1))}>
          {step >= SETUP.length - 1 ? "Finish" : "Next"}
        </Button>
        <span className="text-[12px] text-muted">Finished steps are clickable.</span>
      </div>
      <div className="space-y-2">
        <p className="text-[12px] text-muted">circle</p>
        <Steps steps={SETUP} current={step} onStepClick={setStep} />
      </div>
      <div className="space-y-2">
        <p className="text-[12px] text-muted">glow · the current step pulses with light</p>
        <Steps steps={SETUP} current={step} variant="glow" onStepClick={setStep} />
      </div>
      <div className="space-y-2">
        <p className="text-[12px] text-muted">card</p>
        <Steps steps={SETUP.map((s, i) => ({ ...s, icon: [<Building2 key="a" />, <DoorOpen key="b" />, <Wallet key="c" />, <ShieldCheck key="d" />][i] }))} current={step} variant="card" onStepClick={setStep} />
      </div>
      <div className="space-y-2">
        <p className="text-[12px] text-muted">chevron</p>
        <Steps steps={SETUP} current={step} variant="chevron" onStepClick={setStep} />
      </div>
      <div className="space-y-2">
        <p className="text-[12px] text-muted">bar</p>
        <Steps steps={SETUP} current={step} variant="bar" onStepClick={setStep} />
      </div>
      <div className="grid gap-8 md:grid-cols-2">
        <Steps
          orientation="vertical"
          current={step}
          onStepClick={setStep}
          steps={SETUP.map((s, i) => ({ ...s, content: i === 2 ? <p className="rounded-[10px] border border-dashed border-border2 p-3 text-[12.5px] text-muted">The rates form would be here.</p> : undefined }))}
        />
        <div className="grid grid-cols-2 gap-6">
          <Steps orientation="vertical" variant="glow" current={step} steps={SETUP} />
          <Steps orientation="vertical" variant="dot" current={step} steps={SETUP} />
        </div>
      </div>
    </div>
  );
}