import type { Story, Meta } from '@storybook/react';
import Grid from '@mui/material/Grid';
import { Chips } from './chips';
import type { ChipsProps } from './chips';

export default {
  component: Chips,
  title: 'Forms/Chips',
  argTypes: {
    size: {
      options: ['medium', 'small'],
      control: { type: 'radio' }
    },
    label: {
      description: 'The label of the Chips'
    },
    error: {
      description: 'An error state flag for the Chips component'
    }
  }
} as Meta;

const Template: Story<ChipsProps> = (args) => {
  return (
    <Grid container justifyContent="space-around" alignItems="center">
      <Chips {...args} />
    </Grid>
  );
};

export const Primary = Template.bind({});
Primary.args = {
  label: 'Chips',
  error: false,
  onDelete: () => alert('Deleted')
};