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

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

export default meta;

type Story = StoryObj<typeof meta>;

export const Playground: Story = {};

export const States: Story = {
  render: () => (
    <div className="grid gap-4">
      <div className="flex items-center gap-3">
        <Checkbox defaultChecked id="checkbox-default" />
        <Label htmlFor="checkbox-default">Default checked</Label>
      </div>
      <div className="flex items-center gap-3">
        <Checkbox id="checkbox-unchecked" />
        <Label htmlFor="checkbox-unchecked">Unchecked</Label>
      </div>
      <div className="flex items-center gap-3">
        <Checkbox disabled id="checkbox-disabled" />
        <Label htmlFor="checkbox-disabled">Disabled</Label>
      </div>
      <div className="flex items-center gap-3">
        <Checkbox id="checkbox-invalid" invalid />
        <Label htmlFor="checkbox-invalid">Invalid state</Label>
      </div>
    </div>
  )
};