import {
  Meta,
  Title,
  Subtitle,
  Canvas,
  Controls,
  Story,
} from '@storybook/addon-docs/blocks'
import * as CheckboxStories from './Checkbox.stories'
import { LifecycleTag } from '../../docs/components/LifecycleTag'

<Meta title="Blocks/Checkbox" of={CheckboxStories} />

<Title>Checkbox</Title>
<Subtitle>
  A control that allows the user to select one or more options from a set.
</Subtitle>
<LifecycleTag variant="Stable" />

<Canvas of={CheckboxStories.Default} layout="padded" sourceState="shown" />
<Controls />

## Components

The checkbox family consists of three components that work together to create accessible and well-structured checkbox controls.

- `Checkbox` — The checkbox control itself.
- `LabeledCheckbox` — A components that rederes a label wrapped checkbox.
- `CheckboxList` — A container that provides consistent spacing for a list of checkboxes.

## Usage

The `Checkbox` component can be used as a standalone primitive or combined with helpers for more complex scenarios.

### Primitive Checkbox

You can use the `Checkbox` component by itself, but you should provide an `aria-label` for accessibility if it doesn't have a visible label.

```tsx
import { Checkbox } from '@chainlink/blocks'

export const MyCheckbox = () => {
  return <Checkbox aria-label="A standalone checkbox" />
}
```

### Labeled Checkbox

For most use cases, you should use the `LabeledCheckbox` component. It wraps the `Checkbox` and its label text, providing a larger click area and ensuring accessibility without needing manual `id`s.

```tsx
import { LabeledCheckbox } from '@chainlink/blocks'

export const MyLabeledCheckbox = () => {
  return <LabeledCheckbox>Accept terms and conditions</LabeledCheckbox>
}
```

### Checkbox List

When you have multiple checkboxes, wrap them in a `CheckboxList` to ensure proper spacing and alignment.

```tsx
import { LabeledCheckbox, CheckboxList } from '@chainlink/blocks'

export const MyCheckboxList = () => {
  return (
    <CheckboxList>
      <LabeledCheckbox>Option A</LabeledCheckbox>
      <LabeledCheckbox>Option B</LabeledCheckbox>
      <LabeledCheckbox>Option C</LabeledCheckbox>
    </CheckboxList>
  )
}
```

## Examples

<Canvas
  of={CheckboxStories.CheckboxWithLabel}
  layout="padded"
  sourceState="shown"
/>

<Canvas of={CheckboxStories.AllStates} layout="padded" sourceState="shown" />