Stepper Button

import { ButtonStepper } from '@/components/ui/button-stepper'

'use client'

import { useState } from 'react'
import { ButtonStepper } from '@/components/ui/button-stepper'

export default function ButtonStepperDemo() {
  const [seats, setSeats] = useState(4)
  const [copies, setCopies] = useState(1)

  return (
    <div className="mx-auto flex min-h-[360px] max-w-lg flex-col items-center justify-center gap-12 px-6 py-16">
      <div className="flex w-full flex-col items-center gap-4 text-center">
        <p className="font-mono text-[11px] uppercase tracking-[0.2em] text-muted-foreground">
          Atlas Studio · seats
        </p>
        <p className="max-w-sm text-sm leading-relaxed text-muted-foreground">
          {seats} editor {seats === 1 ? 'seat' : 'seats'} · $28 per seat / month ·
          billing prorated today
        </p>
        <ButtonStepper
          value={seats}
          onValueChange={setSeats}
          min={1}
          max={50}
          label="Editor seats"
        />
      </div>

      <div className="flex w-full flex-col items-center gap-4 border-t border-border/60 pt-10 text-center">
        <p className="font-mono text-[11px] uppercase tracking-[0.2em] text-muted-foreground">
          Print run · copies
        </p>
        <p className="max-w-sm text-sm leading-relaxed text-muted-foreground">
          Hold +/− to ramp quantity, bound bumps stop the repeat at 0 or 24.
        </p>
        <ButtonStepper
          value={copies}
          onValueChange={setCopies}
          min={0}
          max={24}
          size="sm"
          label="Print copies"
        />
      </div>
    </div>
  )
}