import 'frontend-shared-icons/dist/style.css';

import React from 'react';

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

import { THEME } from 'constants/theme';

import { ITypographyProps, Typography } from './Typography';
import { TYPOGRAPHY_TYPE } from './types';

export default {
  title: 'ReactComponentLibrary/Typography',
  component: Typography,
  decorators: [(Story): JSX.Element => <Story />],
} as ComponentMeta<typeof Typography>;

const Template: ComponentStory<React.FC<ITypographyProps>> = (args) => (
  <div>
    {Object.values(TYPOGRAPHY_TYPE).map((type) => (
      <div
        key={type}
        style={{ margin: 20 }}
      >
        <Typography
          type={type}
          {...args}
        >
          Typography {type.toUpperCase()}
        </Typography>
      </div>
    ))}
  </div>
);

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

export const TypographyDark = Template.bind({});
TypographyDark.parameters = {
  backgrounds: { default: 'dark' },
};
TypographyDark.args = {
  theme: THEME.dark,
};