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

import { TextWithBorder } from './text-with-border';
import type { TextWithBorderProps } from './text-with-border';

export default {
  component: TextWithBorder,
  title: 'Tags and Indicators/Health Score',
  argTypes: {
    content: {
      description: 'Textual to be displayed.'
    },
    color: {
      description: 'Color of the text and border.',
      control: {
        type: 'color'
      }
    }
  }
} as Meta;

const Template: Story<TextWithBorderProps> = (args) => (
  <TextWithBorder {...args} />
);

export const Primary = Template.bind({});
Primary.args = {
  content: 'Content',
  color: '#000000'
};

export const Red = Template.bind({});
Red.args = {
  content: 'Red',
  color: '#FD596F'
};

export const InRisk = Template.bind({});
InRisk.args = {
  content: 'In Risk',
  color: '#FFC955'
};

export const Healthy = Template.bind({});
Healthy.args = {
  content: 'Healthy',
  color: '#44D7B6'
};

export const Champion = Template.bind({});
Champion.args = {
  content: 'Champion',
  color: '#288772'
};