Flow Stepper

import { StepperFlow } from '@/components/ui/stepper-flow'

'use client'

import { useState } from 'react'
import { StepperFlow } from '@/components/ui/stepper-flow'
import { cn } from '@/lib/utils'

const STEPS = [
  {
    label: 'Account',
    description: 'Workspace name and region',
    href: '#account',
  },
  {
    label: 'Connectors',
    description: 'Warehouse credentials',
    href: '#connectors',
  },
  {
    label: 'Team',
    description: 'Invite editors and viewers',
  },
  {
    label: 'Review',
    description: 'Confirm plan and launch',
  },
]

export default function StepperFlowDemo() {
  const [current, setCurrent] = useState(1)

  return (
    <div className="mx-auto w-full max-w-3xl px-4 py-10 sm:px-6 sm:py-14">
      <p className="mb-8 font-mono text-[11px] uppercase tracking-[0.2em] text-muted-foreground sm:text-xs">
        Onboarding · Northline
      </p>

      <StepperFlow steps={STEPS} current={current} ariaLabel="Setup progress" />

      <div className="mt-10 flex flex-wrap items-center gap-3 border-t border-border/60 pt-8">
        <button
          type="button"
          disabled={current === 0}
          onClick={() => setCurrent((c) => Math.max(0, c - 1))}
          className={cn(
            'inline-flex h-10 items-center rounded-lg border border-border/60 bg-card px-4 text-sm font-medium text-foreground',
            'transition-colors duration-150 hover:bg-accent disabled:pointer-events-none disabled:opacity-40',
            'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:outline-hidden'
          )}
        >
          Back
        </button>
        <button
          type="button"
          disabled={current >= STEPS.length - 1}
          onClick={() => setCurrent((c) => Math.min(STEPS.length - 1, c + 1))}
          className={cn(
            'inline-flex h-10 items-center rounded-lg bg-primary px-4 text-sm font-medium text-primary-foreground',
            'transition-colors duration-150 hover:bg-primary/90 disabled:pointer-events-none disabled:opacity-40',
            'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:outline-hidden'
          )}
        >
          {current >= STEPS.length - 1 ? 'Done' : 'Continue'}
        </button>
        <span className="ml-auto font-mono text-[11px] tabular-nums text-muted-foreground">
          Step {current + 1} of {STEPS.length}
        </span>
      </div>
    </div>
  )
}