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

<Meta of={SidebarStories} />

<Title>Sidebar</Title>
<Subtitle>
  **⚠️ DEPRECATED:** This component is deprecated and will be removed in the next major version of Blocks. Please use [SidePanel](/docs/blocks-sidepanel--docs) instead.
</Subtitle>
<Subtitle>
  A specialized version of the Sheet component, designed to slide in from the
  right with a prominent close button.
</Subtitle>
<SourceLinks
  links={[
    {
      label: 'View API in Radix UI',
      href: 'https://www.radix-ui.com/primitives/docs/components/dialog#api-reference',
    },
    {
      label: 'shadcn/ui',
      href: 'https://ui.shadcn.com/docs/components/sheet',
    },

]}
/>

<LifecycleTag variant="Deprecated" />

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

## Anatomy

The `Sidebar` is a specific implementation of the `Sheet` component. It uses `SidePanelContent` to provide a consistent layout that opens from the right and includes a prominent, custom close button outside the sheet's main content area. For long content, wrap it in a `SidePanelScrollArea` to enable vertical scrolling.

## Subcomponents

- `SidePanelContent`: The main content container for the sidebar. It has `variant` props for `narrow` (default) and `wide`.
- `SidePanelHeader`: A header component that includes the close button and uses flexbox layout. Title goes on the left, close button on the right.
- `SidePanelCloseMobile`: A close button component that is visible only on mobile devices. Can be used standalone or is automatically included in `SidePanelHeader`.
- `SidePanelTitle`: A title component that composes SheetTitle with proper padding.
- `SidePanelScrollArea`: A component that enables vertical scrolling for long content within the sidebar.
- `SidePanelFooter`: A footer component for actions at the bottom of the sidebar.

## Usage

### Import

```tsx
import {
  SidePanel,
  SidePanelTrigger,
  SidePanelContent,
  SidePanelHeader,
  SidePanelTitle,
  SidePanelScrollArea,
  SidePanelFooter,
} from '@chainlink/blocks'
```

### Example

```tsx
function MySidebar() {
  return (
    <SidePanel>
      <SidePanelTrigger>Open Sidebar</SidePanelTrigger>
      <SidePanelContent>
        <SidePanelHeader>
          <SidePanelTitle>Sidebar Title</SidePanelTitle>
        </SidePanelHeader>
        <SidePanelScrollArea>
          <div className="p-6">Your scrollable content here.</div>
        </SidePanelScrollArea>
        <SidePanelFooter>
          <Button variant="secondary">Footer Action</Button>
        </SidePanelFooter>
      </SidePanelContent>
    </SidePanel>
  )
}
```

## Examples

### With Footer

A standard sidebar that includes a footer for actions.

<Canvas of={SidebarStories.WithFooter} sourceState="shown" />

### Wide Variant

A wider version of the sidebar, suitable for displaying more detailed information. Use `variant="wide"`.

<Canvas of={SidebarStories.WideVariant} sourceState="shown" />