import Icon from '../Icon';
import { ICONS } from '../getIcon';

import { ArgsTable, Story, Canvas, Meta } from '@storybook/addon-docs';
import { createComponentTemplate } from '../../../storybook/functions/create-component-story';

export const argTypes = {
  component: Icon,
  title: 'Components/Icon',
};

<Meta
  title="Components/Icon"
  component={Icon}
/>

export const IconTemplate = args => (
  // Todo: Icon colors
  <div className="h-8 w-8">
    <Icon {...args} />
  </div>
);

<Heading
  title="Icon"
  componentRelativePath="Icon/Icon.tsx"
/>

- [Overview](#overview)
- [Props](#props)
- [Usage](#usage)
- [Contribute](#contribute)

## Overview

Icon is a component that renders the Icons.

<Canvas>
  <Story
    name="Overview"
    args={{
      name: 'clipboard',
    }}
  >
    {IconTemplate.bind({})}
  </Story>
</Canvas>

## Props

<ArgsTable of={Icon} />

## Usage

You can choose the icon from the list of icons. Here we have render all the icons.

<Canvas>
  <Story name="All Icons">
    {() => {
      const icons = Object.keys(ICONS);
      return (
        <div className="flex flex-wrap">
          {icons
            .filter(ic => ic !== 'magnifier')
            .map(icon => (
              <div className="m-4 flex flex-col items-center justify-center">
                <div class="h-8 w-8">
                  <Icon name={icon} />
                </div>
                <div className="text-gray-600">{icon}</div>
              </div>
            ))}
        </div>
      );
    }}
  </Story>
</Canvas>

## Color

Icon colors can be changed by wrapping the icon in a div with the class name

<Canvas>
  <Story
    name="Colors"
    args={{
      name: 'clipboard',
      className: 'text-red-700',
    }}
  >
    {IconTemplate.bind({})}
  </Story>
</Canvas>

## Contribute

<Footer componentRelativePath="Icon/__stories__/icon.stories.mdx" />
