import React from 'react';
import { StoryFn, Meta } from '@storybook/react';

import { Icon } from './Icon';

export default {
  title: 'Icons/Icon',
  component: Icon,
} as Meta<typeof Icon>;

const Template: StoryFn<typeof Icon> = (props) => <Icon {...props} />;

export const Error = Template.bind({});
Error.args = {
  icon: 'error',
};

export const ArrowRight = Template.bind({});
ArrowRight.args = {
  icon: 'arrow-right',
};

export const Selected = Template.bind({});
Selected.args = {
  icon: 'selected',
};

export const Root = Template.bind({});
Root.args = {
  icon: 'root',
};

export const Audio = Template.bind({});
Audio.args = {
  icon: 'audio_file',
  resourceSource: 'matrix',
};

export const ContentTemplate = Template.bind({});
ContentTemplate.args = {
  icon: 'content_template',
  resourceSource: 'matrix',
};

export const Excel = Template.bind({});
Excel.args = {
  icon: 'excel_doc',
  resourceSource: 'matrix',
};

export const Folder = Template.bind({});
Folder.args = {
  icon: 'folder',
  resourceSource: 'matrix',
};

export const GenericFile = Template.bind({});
GenericFile.args = {
  icon: 'generic_file',
  resourceSource: 'matrix',
};

export const Image = Template.bind({});
Image.args = {
  icon: 'image',
  resourceSource: 'matrix',
};

export const Page = Template.bind({});
Page.args = {
  icon: 'page_standard',
  resourceSource: 'matrix',
};

export const PageContent = Template.bind({});
PageContent.args = {
  icon: 'page_content',
  resourceSource: 'matrix',
};

export const Pdf = Template.bind({});
Pdf.args = {
  icon: 'pdf_file',
  resourceSource: 'matrix',
};

export const Powerpoint = Template.bind({});
Powerpoint.args = {
  icon: 'powerpoint_doc',
  resourceSource: 'matrix',
};

export const Site = Template.bind({});
Site.args = {
  icon: 'site',
  resourceSource: 'matrix',
};

export const Video = Template.bind({});
Video.args = {
  icon: 'video_file',
  resourceSource: 'matrix',
};

export const Word = Template.bind({});
Word.args = {
  icon: 'word_doc',
  resourceSource: 'matrix',
};

export const LargeIcon = Template.bind({});
LargeIcon.args = {
  className: 'w-36 h-36',
};

export const SmallIcon = Template.bind({});
SmallIcon.args = {
  className: 'w-4 h-4',
};

export const Default = Template.bind({});
Default.args = {};