import type { Meta, StoryObj } from '@storybook/react'
import React, { useState } from 'react'
import { Button } from './Button'
import { Stepper } from './Stepper'

const meta: Meta = {
  title: 'Components/Stepper',
  parameters: { layout: 'centered' },
}
export default meta

const steps = [
  { label: '데이터 준비' },
  { label: '설정' },
  { label: '검토' },
  { label: '완료' },
]

export const Interactive: StoryObj = {
  name: 'Stepper (인터랙티브)',
  render: () => {
    const [current, setCurrent] = useState(2)
    return (
      <div className="space-y-6 w-[600px]">
        <Stepper steps={steps} currentStep={current} />
        <div className="flex gap-2 justify-center">
          <Button variant="outline" size="sm" onClick={() => setCurrent((c) => Math.max(1, c - 1))}>이전</Button>
          <Button size="sm" onClick={() => setCurrent((c) => Math.min(steps.length + 1, c + 1))}>다음</Button>
        </div>
      </div>
    )
  },
}

export const Compact: StoryObj = {
  name: 'Stepper — Compact',
  render: () => (
    <div className="space-y-4">
      <Stepper steps={steps} currentStep={2} compact />
      <Stepper steps={steps} currentStep={3} compact />
    </div>
  ),
}