import Dropdown from '../Dropdown';
import { ArgsTable, Story, Canvas, Meta } from '@storybook/addon-docs';
import { createComponentTemplate } from '../../../storybook/functions/create-component-story';

export const argTypes = {
  component: Dropdown,
  title: 'Components/Dropdown',
};

<Meta
  title="Components/Dropdown"
  component={Dropdown}
/>

export const DropdownTemplate = args => (
  // Todo: this should not set a background
  <div className="flex h-32">
    <Dropdown {...args} />
  </div>
);

<Heading
  title="Dropdown"
  componentRelativePath="Dropdown/Dropdown.tsx"
/>

- [Overview](#overview)
- [Props](#props)
- [Usage](#usage)
- [Contribute](#contribute)

## Overview

Dropdown is a modal Dropdown component which enabled to show a modal Dropdown.

<Canvas>
  <Story
    name="Overview"
    args={{ id: 'dropdown-d', list: [] }}
  >
    {DropdownTemplate.bind({})}
  </Story>
</Canvas>

## Props

<ArgsTable of={Dropdown} />

## Usage

You can list the items in the dropdown.

<Canvas>
  <Story
    name="List"
    args={{
      id: 'dropdown-1',
      children: <div className="text-black">Drop Down</div>,
      showDropdownIcon: true,
      list: [
        {
          title: 'Item 1',
          icon: 'clipboard',
          onClick: () => {
            alert('Item 1 clicked');
          },
        },
        {
          title: 'Item 2',
          icon: 'tracked',
          onClick: () => {
            alert('Item 2 clicked');
          },
        },
      ],
    }}
  >
    {DropdownTemplate.bind({})}
  </Story>
</Canvas>

## Contribute

<Footer componentRelativePath="Dropdown/__stories__/dropdown.stories.mdx" />
