import React from 'react';

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

import { Badge } from './Badge';
import { BadgeProps, BADGE_TYPE } from './types';
import { THEME } from '../../constants';

import styles from './badge.stories.scss';

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

const BadgeManager = (props: BadgeProps): JSX.Element => (
  <div className={styles['container']}>
    {Object.values(BADGE_TYPE).map((type) => (
      <Badge
        key={type}
        type={type}
        {...props}
        content={type}
      />
    ))}
  </div>
);

const Template: ComponentStory<typeof Badge> = (props) => <BadgeManager {...props} />;

export const Default = Template.bind({});
Default.args = {
  theme: THEME.light,
};