import { Label, Switch } from "@ai-ui/ui";
import type { Meta, StoryObj } from "@storybook/react";

const meta = {
  title: "Components/Switch",
  component: Switch,
  args: {
    defaultChecked: true
  },
  argTypes: {
    className: {
      control: false
    },
    defaultChecked: {
      control: "boolean"
    },
    disabled: {
      control: "boolean"
    },
    invalid: {
      control: "boolean"
    }
  },
  parameters: {
    layout: "centered"
  },
  tags: ["autodocs"]
} satisfies Meta<typeof Switch>;

export default meta;

type Story = StoryObj<typeof meta>;

export const Playground: Story = {
  render: (args) => (
    <div className="flex items-center gap-3">
      <Switch id="switch-playground" {...args} />
      <Label htmlFor="switch-playground">Live publishing</Label>
    </div>
  )
};

export const States: Story = {
  render: () => (
    <div className="grid gap-4">
      <div className="flex items-center gap-3">
        <Switch defaultChecked id="switch-live" />
        <Label htmlFor="switch-live">Live publishing</Label>
      </div>
      <div className="flex items-center gap-3">
        <Switch id="switch-draft" />
        <Label htmlFor="switch-draft">Draft only</Label>
      </div>
      <div className="flex items-center gap-3">
        <Switch disabled id="switch-disabled" />
        <Label htmlFor="switch-disabled">Disabled</Label>
      </div>
      <div className="flex items-center gap-3">
        <Switch id="switch-invalid" invalid />
        <Label htmlFor="switch-invalid">Invalid state</Label>
      </div>
    </div>
  )
};