// eslint-disable-next-line import/no-extraneous-dependencies
import { kebabCase } from 'lodash-es';
import React from 'react';
import { Meta, Story } from '@storybook/react';
import description from './Button.md';
import Button, { ButtonProps } from './Button';
import colors from '../../scss/exports/colors.scss';

const meta: Meta = {
  title: 'Components/Button',
  component: Button,
  parameters: {
    docs: {
      description: {
        component: description,
      },
    },
  },
  argTypes: {
    color: {
      control: {
        type: 'select',
        options: Object.keys(colors).map((color) => kebabCase(color)),
      },
    },
    children: {
      table: {
        disable: true,
      },
    },
    className: {
      control: {
        type: 'text',
      },
    },
    size: {
      control: {
        type: 'select',
        options: [null, 'xs', 'sm', 'lg', 'xl'],
      },
    },
    rounded: {
      control: {
        type: 'boolean',
      },
    },
    circle: {
      control: {
        type: 'boolean',
      },
    },
  },
};

export default meta;

const Template: Story<ButtonProps<'button'>> = (args) => <Button {...args} />;

export const Default = Template.bind({});

Default.args = {
  color: 'blue',
  label: 'Button',
  children: 'Button',
};