import type { Meta, StoryObj } from '@storybook/react'
import { Button } from './Button'
import { ToastProvider, useToast } from './Toast'

const meta: Meta = {
  title: 'Components/Toast',
  parameters: { layout: 'centered' },
  decorators: [(Story) => <ToastProvider><Story /></ToastProvider>],
}
export default meta

const ToastDemo = () => {
  const { toast } = useToast()
  return (
    <div className="flex flex-wrap gap-3">
      <Button
        variant="outline"
        onClick={() => toast({ type: 'success', title: '저장 완료', description: '설정이 성공적으로 저장되었습니다.' })}
      >
        Success
      </Button>
      <Button
        variant="danger"
        onClick={() => toast({ type: 'error', title: '오류 발생', description: 'API 연결에 실패했습니다.' })}
      >
        Error
      </Button>
      <Button
        variant="outline"
        onClick={() => toast({ type: 'warning', title: '사용량 주의', description: '일일 한도의 90%에 도달했습니다.' })}
      >
        Warning
      </Button>
      <Button
        variant="outline"
        onClick={() => toast({ type: 'info', title: '업데이트 안내', description: '새 버전 v3.2가 출시되었습니다.' })}
      >
        Info
      </Button>
      <Button
        variant="outline"
        onClick={() => toast({ type: 'success', title: '빠른 저장', description: '2초 후 사라지는 토스트입니다.', duration: 2000 })}
      >
        2s
      </Button>
      <Button
        variant="outline"
        onClick={() => toast({ type: 'warning', title: '수동 확인 필요', description: 'duration: 0으로 자동 해제를 끈 상태입니다.', duration: 0 })}
      >
        Sticky
      </Button>
    </div>
  )
}

export const Triggers: StoryObj = {
  name: 'Toast (버튼으로 트리거)',
  render: () => <ToastDemo />,
}