import { Canvas, Meta, Story } from "@storybook/blocks";

import Submenu from "./";
import * as stories from "./submenu.stories.js";

<Meta
  title="Components/Submenu"
  component={Submenu}
  argTypes={{
    data: { required: true },
  }}
/>

# Submenu

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

### Usage

```js
import Submenu from "@docspace/components/submenu";
```

```jsx
<Submenu
  data={[
    {
      id: "FileInput",
      name: "File Input",
      content: (
        <FileInput
          accept=".doc, .docx"
          id="file-input-id"
          name="demoFileInputName"
          onInput={function noRefCheck() {}}
          placeholder="Input file"
        />
      ),
    },
    {
      id: "ToggleButton",
      name: "Toggle Button",
      content: (
        <ToggleButton
          className="toggle className"
          id="toggle id"
          label="label text"
          onChange={() => {}}
        />
      ),
    },
  ]}
  startSelect={1}
/>
```

### Properties

| Props         |      Type       | Required | Values | Default | Description                                                                         |
| ------------- | :-------------: | :------: | :----: | :-----: | ----------------------------------------------------------------------------------- |
| `data`        |     `array`     |    ✅    |   -    |    -    | List of elements                                                                    |
| `startSelect` | `obj`, `number` |    -     |   -    |    0    | Object from **`data`** **OR** Its index in **`data`** that will be a default select |