import { Meta, Preview, Props, Story } from "@storybook/addon-docs/blocks";
import { Tab, TabGroup } from "./Tab";

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

# Tab

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

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

## Custom Props

<Props of={Tab} />

## Demos

### Active

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

### In a group

<Preview>
  <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>
</Preview>

### In a group with padding

<Preview>
  <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>
</Preview>