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

<Meta of={NavTabsStories} />

<Title>NavTabs</Title>
<Subtitle>
  A set of layered sections of content—known as tab panels—that are displayed
  one at a time, styled for navigation.
</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={NavTabsStories.Default} sourceState="shown">
  <Controls />
</Canvas>

## Subcomponents

- `NavTabs`: The root component that manages the tab state.
- `NavTabsTitle`: An optional title component that displays on the left with a divider.
- `NavTabsList`: The container for the tab triggers.
- `NavTabsTrigger`: The button that activates its associated content.
- `NavTabsContent`: The container for the content associated with each trigger.

## Usage

### Import

```tsx
import {
  NavTabs,
  NavTabsContent,
  NavTabsList,
  NavTabsTitle,
  NavTabsTrigger,
} from '@chainlink/blocks'
```

### Example

```tsx
export function MyNavTabs() {
  return (
    <NavTabs defaultValue="runs">
      <NavTabsList>
        <NavTabsTrigger value="runs">Runs</NavTabsTrigger>
        <NavTabsTrigger value="deployments">Deployments</NavTabsTrigger>
      </NavTabsList>
      <NavTabsContent value="runs">View your runs here.</NavTabsContent>
      <NavTabsContent value="deployments">
        View your deployments here.
      </NavTabsContent>
    </NavTabs>
  )
}
```

### With Title

You can add a title to the left of the tabs using the `NavTabsTitle` component:

```tsx
export function MyNavTabsWithTitle() {
  return (
    <NavTabs defaultValue="overview">
      <NavTabsList>
        <NavTabsTitle>Dashboard</NavTabsTitle>
        <NavTabsTrigger value="overview">Overview</NavTabsTrigger>
        <NavTabsTrigger value="analytics">Analytics</NavTabsTrigger>
      </NavTabsList>
      <NavTabsContent value="overview">Dashboard overview</NavTabsContent>
      <NavTabsContent value="analytics">Analytics content</NavTabsContent>
    </NavTabs>
  )
}
```

## Examples

### With Title

A tab group with a title on the left, separated by a vertical divider.

<Canvas of={NavTabsStories.WithTitle} sourceState="shown" />

### Multiple Options

A tab group with several options.

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

### With Icons

Tabs can include icons for better visual communication.

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

### With Disabled Tab

A tab can be disabled to prevent interaction.

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