import React from 'react';

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

import { Icon, ICON_SIZE } from './Icon';

import styles from './icon.stories.scss';
import 'frontend-shared-icons/dist/style.css';

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

const Template: ComponentStory<typeof Icon> = (args) => <Icon {...args} />;

export const HomeIcon = Template.bind({});
HomeIcon.args = {
  name: 'home',
  size: ICON_SIZE.large,
};

export const CustomIcon = Template.bind({});
CustomIcon.args = {
  name: 'home',
  className: styles['custom-icon'],
};