import type { Story, Meta } from '@storybook/react';
import { TextWithIndicator } from '../text-with-indicator';
import type { TextWithIndicatorProps } from '../text-with-indicator';

export default {
  title: 'Tags and Indicators/Inside Table',
  argTypes: {
    children: {
      description: 'The indicator text.'
    },
    indicatorShape: {
      description: 'The indicator shape.'
    },
    indicatorColor: {
      description: 'The indicator color.'
    },
    textColor: {
      description: 'The indicator text color.'
    }
  }
} as Meta;

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

export const Success = Template.bind({});
Success.args = {
  children: 'Success',
  indicatorShape: 'circle',
  indicatorColor: '#44D7B6',
  textColor: '#394463'
};

export const Fail = Template.bind({});
Fail.args = {
  ...Success.args,
  children: 'Fail',
  indicatorColor: '#FD596F'
};

export const Pending = Template.bind({});
Pending.args = {
  ...Success.args,
  children: 'Pending',
  indicatorColor: '#FFC955'
};

export const Disable = Template.bind({});
Disable.args = {
  ...Success.args,
  children: 'Disable',
  indicatorColor: '#CBD2E2',
  textColor: '#CBD2E2'
};

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