import {
  Meta,
  Story,
  Canvas,
  ArgsTable,
  Title,
  Subtitle,
  Controls,
  Description,
} from '@storybook/addon-docs/blocks'
import { LifecycleTag, SourceLinks } from '../../docs/components'
import { SegmentButton } from './SegmentButton'
import * as SegmentButtonStories from './SegmentButton.stories'
import { Lifecycle } from '../../docs/components'

<Meta of={SegmentButtonStories} title="Blocks/SegmentButton" />

<Title>SegmentButton</Title>
<Subtitle>A two-state button that can be toggled on or off</Subtitle>

<SourceLinks
  links={[
    {
      label: 'shadcn/ui Toggle',
      href: 'https://ui.shadcn.com/docs/components/toggle',
    },
    {
      label: 'Radix UI Toggle API',
      href: 'https://www.radix-ui.com/primitives/docs/components/toggle#api-reference',
    },
  ]}
/>
<LifecycleTag variant="In Development" />

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

This component is built on top of [Radix UI's Toggle](https://www.radix-ui.com/primitives/docs/components/toggle#api-reference). For more details on API and accessibility, refer to the official Radix documentation.

## Usage

Import the segment button from `@chainlink/blocks`

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

export function SegmentButtonExample() {
  return <SegmentButton>SegmentButton</SegmentButton>
}
```

## Examples

### Pressed

The segment button can be in a pressed state.

<Canvas of={SegmentButtonStories.Pressed} sourceState="shown" />

### Disabled

<Canvas of={SegmentButtonStories.Disabled} sourceState="shown" />

### Disabled Pressed

<Canvas of={SegmentButtonStories.DisabledPressed} sourceState="shown" />

### Size sm

<Canvas of={SegmentButtonStories.Small} sourceState="shown" />

### Size sm - Pressed

<Canvas of={SegmentButtonStories.SmallPressed} sourceState="shown" />{' '}