import type { Meta, StoryObj } from '@storybook/react-vite'
import { Toggle } from './toggle'
import { FontBoldIcon } from '@radix-ui/react-icons'

const meta = {
  title: 'Toggle',
  component: Toggle,
  tags: ['autodocs'],
  argTypes: {
    variant: {
      options: ['default', 'outline'],
      control: { type: 'radio' },
    },
    size: {
      options: ['default', 'sm', 'lg'],
      control: { type: 'radio' },
    },
    disabled: {
      control: { type: 'boolean' },
    },
  },
  render: (args) => (
    <div className="flex items-center justify-center">
      <Toggle aria-label="Toggle italic" disabled={args.disabled} variant={args.variant} size={args.size}>
        <FontBoldIcon className="h-4 w-4" />
      </Toggle>
    </div>
  ),
} satisfies Meta<typeof Toggle>

export default meta

// STORIES ---------------------------------------------------------------------

export const Default = {
  args: {
    variant: 'default',
    size: 'default',
    disabled: false,
  },
}

export const Disabled = {
  args: {
    variant: 'default',
    size: 'default',
    disabled: true,
  },
}

export const WithLabel: StoryObj<typeof meta> = {
  args: {
    variant: 'outline',
    size: 'default',
    disabled: false,
  },
  render: (args) => (
    <div className="flex items-center justify-center">
      <Toggle aria-label="Toggle italic" disabled={args.disabled} variant={args.variant} size={args.size}>
        <FontBoldIcon className="h-4 w-4" />
        With a label
      </Toggle>
    </div>
  ),
}
