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

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

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

export const buttonTemplate = createComponentTemplate(Button);

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

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

## Overview

You can use the button component to create a button. It can be used in different ways, the default
button is a simple button with text.

<Canvas>
  <Story
    name="Overview"
    args={{ children: 'Button', color: 'default' }}
  >
    {buttonTemplate.bind({})}
  </Story>
</Canvas>

## Props

<ArgsTable of={Button} />

## Usage

### Types

There can be different types of buttons: `primary`, and `secondary`.

<Canvas>
  <Story name="Types">
    <div className="flex space-x-2">
      <Button type={ButtonEnums.type.primary}>Primary Button</Button>
      <Button type={ButtonEnums.type.secondary}>Secondary Button</Button>
    </div>
  </Story>
</Canvas>

### Sizes

There are different sizes for the button: `small`, and `medium`. The size refers to the button's
height.

<Canvas>
  <Story name="Sizes">
    <div className="flex items-center space-x-2">
      <Button size={ButtonEnums.size.small}>Small Button</Button>
      <Button size={ButtonEnums.size.medium}>Medium Button</Button>
    </div>
  </Story>
</Canvas>

### Mixing props

You can mix different props together to create a button.

<Canvas>
  <Story name="Custom">
    <Button
      type={ButtonEnums.type.secondary}
      size={ButtonEnums.size.small}
    >
      Small, Secondary Button
    </Button>
  </Story>
</Canvas>

### Disabled

You can disable the button by setting the `disabled` property to true.

<Canvas>
  <Story name="Disabled">
    <Button disabled={true}>Disabled Button</Button>
  </Story>
</Canvas>

### Start/End Icons

You can add an icon to the start of the button. It accepts an icon component.

<Canvas>
  <Story name="Start Icon">
    {() => {
      // svg icon for github
      const Github = () => {
        return (
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
            className="feather feather-github"
          >
            <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
          </svg>
        );
      };
      return <Button startIcon={<Github />}>Start Icon Button</Button>;
    }}
  </Story>
</Canvas>

End Icon is the same as start icon, but for the end of the button.

<Canvas>
  <Story name="End Icon">
    {() => {
      // svg icon for github
      const Github = () => {
        return (
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
            className="feather feather-github"
          >
            <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
          </svg>
        );
      };
      return (
        <Button
          startIcon={<Github />}
          endIcon={<Github />}
        >
          Start and End Icon Button
        </Button>
      );
    }}
  </Story>
</Canvas>

## Contribute

<Footer componentRelativePath="Button/__stories__/button.stories.mdx" />
