import { Meta, StoryObj } from "@storybook/react"
import React, { useState } from "react"
import { ToggleButton, ToggleButtonProps } from "./ToggleButton"

type Story = StoryObj<typeof ToggleButton>

const meta: Meta<typeof ToggleButton> = {
  title: "Design System/ToggleButton",
  component: ToggleButton,
  args: {
    children: "Click me",
  },
}

export default meta

const Template = (args: ToggleButtonProps) => {
  const [checked, setChecked] = useState(args.checked)

  return (
    <ToggleButton
      checked={checked}
      onClick={() => {
        setChecked(prev => !prev)
      }}
      {...args}
    />
  )
}

export const Default: Story = {
  render: Template,
}

export const Checked: Story = {
  render: Template,
  args: {
    checked: true,
  },
}

export const Small: Story = {
  render: Template,
  args: {
    size: "sm",
  },
}