import { Meta, Canvas, ArgsTable, Story } from "@storybook/blocks";
import { ComponentHeading } from "../../storybook-components";
import { Tab, TabGroup } from "./Tab";

<Meta
  title="Components/Disclosure/Tab"
  component={Tab}
  parameters={{
    subcomponents: { TabGroup },
  }}
/>

<ComponentHeading
  componentName="Tab"
  description="A stylized button to toggle visibility of related content"
  sourcePath="src/components/Tab/Tab.tsx"
  hideDemosLink
/>

## Installation

```jsx
import { Tab } from "@conveyorhq/arrow-ds";
```

## Basic usage

<Canvas>
  <Story name="Tab">
    <Tab>Tab component</Tab>
  </Story>
</Canvas>

## API

<ArgsTable of={Tab} />

## Demos

### Active

<Canvas>
  <Story name="Tab active">
    <Tab active>Tab active</Tab>
  </Story>
</Canvas>

### In a group

<Canvas>
  <Story name="Tab in a group">
    {() => {
      const [active, setActive] = React.useState(0);
      return (
        <Tab.Group>
          {["Tab first", "Tab", "Tab also"].map((tab, index) => (
            <Tab
              key={tab}
              active={index === active}
              onClick={() => setActive(index)}
            >
              {tab}
            </Tab>
          ))}
        </Tab.Group>
      );
    }}
  </Story>
</Canvas>

### In a group with padding

<Canvas>
  <Story name="Tab in a group with padding">
    {() => {
      const [active, setActive] = React.useState(0);
      return (
        <Tab.Group className="px-4">
          {["Tab first", "Tab", "Tab also"].map((tab, index) => (
            <Tab
              key={tab}
              active={index === active}
              onClick={() => setActive(index)}
            >
              {tab}
            </Tab>
          ))}
        </Tab.Group>
      );
    }}
  </Story>
</Canvas>