import { Canvas, Meta, Controls } from "@storybook/addon-docs/blocks";

import * as SegmentedControlStories from "./SegmentedControl.stories";

<Meta of={SegmentedControlStories} />

# SegmentedControl

A segmented control component that allows users to select a single option from a set of mutually exclusive choices. It's visually similar to a button group where the selected item is highlighted. Unlike tabs, it doesn't have associated content panels.

## Features

- **Radio-like behavior**: Only one item can be selected at a time
- **Visual variants**: Accent (default) and Ghost styles
- **Icon support**: Optional icons can be added to items
- **Sizes**: Small and medium sizes available
- **Form integration**: Works with form labels, descriptions, and validation
- **Accessibility**: Built with proper ARIA attributes and keyboard navigation

## Basic Usage

```tsx
import { SegmentedControl } from "@webiny/admin-ui";
import { useState } from "react";

const MyComponent = () => {
  const [value, setValue] = useState("option1");

  return (
    <SegmentedControl
      items={[
        { label: "Option 1", value: "option1" },
        { label: "Option 2", value: "option2" },
        { label: "Option 3", value: "option3" }
      ]}
      value={value}
      onChange={setValue}
    />
  );
};
```

## With Icons

```tsx
import { SegmentedControl } from "@webiny/admin-ui";
import { Icon } from "@webiny/admin-ui";

<SegmentedControl
  items={[
    { label: "Lock", value: "lock", icon: <Icon name="lock" /> },
    { label: "Unlock", value: "unlock", icon: <Icon name="lock-open" /> },
    { label: "Settings", value: "settings", icon: <Icon name="settings" /> }
  ]}
  value={value}
  onChange={setValue}
/>;
```

## Variants

### Accent (Default)

The accent variant uses the primary color for the selected state.

### Ghost

The ghost variant is designed for use on dark backgrounds, using a more subtle appearance.

## Form Integration

```tsx
<SegmentedControl
  label="Select a plan"
  description="Choose your subscription plan"
  required
  items={plans}
  value={selectedPlan}
  onChange={setSelectedPlan}
  validation={{
    isValid: false,
    message: "Please select a plan"
  }}
/>
```

## API

### SegmentedControl Props

| Prop          | Type                           | Default    | Description                     |
| ------------- | ------------------------------ | ---------- | ------------------------------- |
| `items`       | `SegmentedControlItemParams[]` | -          | Array of items to display       |
| `value`       | `string`                       | -          | Currently selected value        |
| `onChange`    | `(value: string) => void`      | -          | Callback when selection changes |
| `variant`     | `"accent" \| "ghost"`          | `"accent"` | Visual style variant            |
| `size`        | `"sm" \| "md"`                 | `"md"`     | Size of the control             |
| `disabled`    | `boolean`                      | `false`    | Disable all items               |
| `className`   | `string`                       | -          | Additional CSS class            |
| `label`       | `string \| React.ReactNode`    | -          | Form label                      |
| `description` | `string \| React.ReactNode`    | -          | Form description                |
| `note`        | `string \| React.ReactNode`    | -          | Form note                       |
| `required`    | `boolean`                      | -          | Show required indicator         |
| `validation`  | `object`                       | -          | Validation state and message    |

### SegmentedControlItemParams

| Prop       | Type                        | Default | Description                |
| ---------- | --------------------------- | ------- | -------------------------- |
| `label`    | `string \| React.ReactNode` | -       | Item label                 |
| `value`    | `string \| number`          | -       | Item value                 |
| `disabled` | `boolean`                   | `false` | Disable this specific item |
| `icon`     | `React.ReactNode`           | -       | Optional icon to display   |
| `id`       | `string`                    | -       | Optional custom ID         |

## Examples

<Canvas of={SegmentedControlStories.Default} />
<Canvas of={SegmentedControlStories.VariantLight} />
<Canvas of={SegmentedControlStories.VariantDimmed} />
<Canvas of={SegmentedControlStories.VariantGhost} />
<Canvas of={SegmentedControlStories.WithFormComponent} />
<Canvas of={SegmentedControlStories.Disabled} />