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

<Meta of={TabsStories} />

<Title>Tabs</Title>
<Subtitle>
  A set of layered sections of content, known as tab panels, that are displayed
  one at a time.
</Subtitle>
<SourceLinks
  links={[
    {
      label: 'Radix UI',
      href: 'https://www.radix-ui.com/primitives/docs/components/tabs',
    },
    {
      label: 'shadcn/ui',
      href: 'https://ui.shadcn.com/docs/components/tabs',
    },
  ]}
/>
<LifecycleTag variant="Stable" />

<Canvas of={TabsStories.Default} sourceState="shown">
  <Controls />
</Canvas>

## Subcomponents

- `Tabs`: The root component that manages the tab state.
- `TabsList`: The container for the tab triggers.
- `TabsTrigger`: The button that activates its associated content.
- `TabsContent`: The container for the content associated with each trigger.

## Usage

### Import

```tsx
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@chainlink/blocks'
```

### Example

```tsx
export function MyTabs() {
  return (
    <Tabs defaultValue="runs">
      <TabsList>
        <TabsTrigger value="runs">Runs</TabsTrigger>
        <TabsTrigger value="deployments">Deployments</TabsTrigger>
      </TabsList>
      <TabsContent value="runs">View your runs here.</TabsContent>
      <TabsContent value="deployments">View your deployments here.</TabsContent>
    </Tabs>
  )
}
```

## Examples

### Multiple Options

A tab group with several options.

<Canvas of={TabsStories.MultipleOptions} sourceState="shown" />

### With Icons

Tabs can include icons for better visual communication.

<Canvas of={TabsStories.WithIcons} sourceState="shown" />

### With Disabled Tab

A tab can be disabled to prevent interaction.

<Canvas of={TabsStories.WithDisabledTab} sourceState="shown" />