import { Story, ArgsTable, Canvas, Meta } from "@storybook/addon-docs/blocks";
import * as stories from "./tabs-container.stories.js";
import TabContainer from "./";

<Meta
  title="Components/TabContainer"
  component={TabContainer}
  parameters={{
    source: {
      code: stories.basic,
    },
  }}
  argTypes={{
    onSelect: { action: "onSelect. Selected items: " },
  }}
/>

# TabContainer

Custom Tabs menu

<Canvas>
  <Story story={stories.basic} name="Default" />
</Canvas>

<ArgsTable story="Default" />

### Array Items Properties

| Props     |   Type   | Required | Values | Default | Description           |
| --------- | :------: | :------: | :----: | :-----: | --------------------- |
| `id`      | `string` |    ✅    |   -    |    -    | Index of object array |
| `title`   | `string` |    ✅    |   -    |    -    | Tabs title            |
| `content` | `object` |    ✅    |   -    |    -    | Content in Tab        |

```js
const array_items = [
  {
    key: "0",
    title: "Title1",
    content: (
      <div>
        <div>
          <button>BUTTON</button>
        </div>
        <div>
          <button>BUTTON</button>
        </div>
        <div>
          <button>BUTTON</button>
        </div>
      </div>
    ),
  },
  {
    key: "1",
    title: "Title2",
    content: (
      <div>
        <div>
          <label>LABEL</label>
        </div>
        <div>
          <label>LABEL</label>
        </div>
        <div>
          <label>LABEL</label>
        </div>
      </div>
    ),
  },
  {
    key: "2",
    title: "Title3",
    content: (
      <div>
        <div>
          <input></input>
        </div>
        <div>
          <input></input>
        </div>
        <div>
          <input></input>
        </div>
      </div>
    ),
  },
];
```

```jsx
<TabContainer elements={array_items} />
```