import React from 'react';

import { ComponentMeta, ComponentStory } from '@storybook/react';

import { Chip, CHIP_TYPE } from './Chip';
import { THEME } from '../../constants';

export default {
  title: 'ReactComponentLibrary/Chip',
  component: Chip,
  decorators: [
    (Story): JSX.Element => (
      <div className="centered-layout">
        <Story />
      </div>
    ),
  ],
} as ComponentMeta<typeof Chip>;

const Template: ComponentStory<typeof Chip> = (args) => <Chip {...args} />;

export const LightRegularWithLabel = Template.bind({});
LightRegularWithLabel.args = {
  label: 'Regular',
  theme: THEME.light,
};

export const LightRegularDisabledWithLabel = Template.bind({});
LightRegularDisabledWithLabel.args = {
  label: 'Regular',
  disabled: true,
  theme: THEME.light,
};

export const LightRegularWithCustomDeleteIcon = Template.bind({});
LightRegularWithCustomDeleteIcon.args = {
  label: 'Regular',
  type: CHIP_TYPE.regular,
  theme: THEME.light,
  deleteIcon: 'spotify',
};

export const LightCompactWithLabel = Template.bind({});
LightCompactWithLabel.args = {
  label: 'Compact',
  type: CHIP_TYPE.compact,
  theme: THEME.light,
};

export const LightCompactWithCustomDeleteIcon = Template.bind({});
LightCompactWithCustomDeleteIcon.args = {
  label: 'Regular',
  type: CHIP_TYPE.compact,
  theme: THEME.light,
  deleteIcon: 'spotify',
};