import { SwitchBasicDemo } from "../../../src/components/switch-basic-demo";
import { SwitchSizesDemo } from "../../../src/components/switch-sizes-demo";
import { SwitchWithLabelsDemo } from "../../../src/components/switch-with-labels-demo";
import { SwitchDisabledDemo } from "../../../src/components/switch-disabled-demo";

## Overview

The Switch component provides a toggle control for binary on/off states with smooth sliding animations. It supports multiple sizes, keyboard accessibility, and clear visual feedback for checked, unchecked, and disabled states.

## Import

```tsx
import { Switch } from "@px-ui/core";
```

## Usage

<Preview>
  <SwitchBasicDemo />
</Preview>

<CodeBlock>
  ```tsx
  <div className="flex items-center gap-2">
    <Switch id="notifications" />
    <label htmlFor="notifications">Enable notifications</label>
  </div>
  ```
</CodeBlock>

## Examples

### Sizes

The Switch component supports three size variants to match different interface contexts.

<Preview>
  <SwitchSizesDemo />
</Preview>

<CodeBlock>
  ```tsx
  <Switch id="small" size="sm" defaultChecked />
  <Switch id="default" defaultChecked />
  <Switch id="large" size="lg" defaultChecked />
  ```
</CodeBlock>

### With Labels

Switches are commonly paired with labels to describe what they control. Always use a label for accessibility.

<Preview>
  <SwitchWithLabelsDemo />
</Preview>

<CodeBlock>
  ```tsx
  <div className="flex items-center gap-2">
    <Switch id="airplane" />
    <label htmlFor="airplane">Airplane mode</label>
  </div>

  <div className="flex items-center gap-2">
    <Switch id="wifi" defaultChecked />
    <label htmlFor="wifi">Wi-Fi</label>
  </div>

  <div className="flex items-center gap-2">
    <Switch id="bluetooth" defaultChecked />
    <label htmlFor="bluetooth">Bluetooth</label>
  </div>
  ```
</CodeBlock>

### Disabled State

Switches can be disabled in either the on or off state.

<Preview>
  <SwitchDisabledDemo />
</Preview>

<CodeBlock>
  ```tsx
  <Switch id="disabled-off" disabled />
  <Switch id="disabled-on" disabled defaultChecked />
  ```
</CodeBlock>

## API Reference

### Switch

A toggle control component with smooth animations and multiple size options.

| Prop        | Type                        | Default     | Description                                                 |
| ----------- | --------------------------- | ----------- | ----------------------------------------------------------- |
| `size`      | `"sm" \| "lg" \| undefined` | `undefined` | Size of the switch. When undefined, renders at default size |
| `className` | `string`                    | -           | Additional CSS classes                                      |

**Inherited Props:** Inherits all props from [Base UI Switch.Root](https://base-ui.com/react/components/switch#root) including `checked`, `defaultChecked`, `onCheckedChange`, `disabled`, `required`, etc.