import { Story, Meta } from '@storybook/react';

import Box from '@mui/material/Box';
import { TextWithIndicator } from '../text-with-indicator';
import type { TextWithIndicatorProps } from '../text-with-indicator';

export default {
  component: TextWithIndicator,
  title: 'Table/In Cells/Reason',
  argTypes: {
    indicatorColor: {
      description: 'The color of the square (or circle) indicator.',
      control: {
        type: 'color'
      }
    },
    children: {
      description: 'Components which will be rendered inside.'
    },
    classes: {
      description: 'Override default classes.'
    },
    indicatorShape: {
      description: 'The shape of the indicator.',
      options: ['square', 'circle'],
      control: {
        type: 'select'
      },
      defaultValue: {
        summary: 'square'
      }
    }
  }
} as Meta;

const Template: Story<TextWithIndicatorProps> = (args) => (
  <Box width={200}>
    <TextWithIndicator {...args} />
  </Box>
);

export const Primary = Template.bind({});
Primary.args = {
  children: 'Add max-width to make the text break line.',
  indicatorColor: '#000000'
};

export const Red = Template.bind({});
Red.args = {
  children: 'Red indicator example.',
  indicatorColor: '#FD596F'
};

export const Blue = Template.bind({});
Blue.args = {
  children: 'Blue indicator example.',
  indicatorColor: '#266FE2'
};

export const Green = Template.bind({});
Green.args = {
  children: 'Green indicator example.',
  indicatorColor: '#44D7B6'
};