import { CodeBlock, ConfigBlock } from "@src/helpers/DocBlocks";
import { InlineCode } from "@src/Theme/components";
import Icon from "./Icon";
import {
  IconSheet,
  NewIconSheet,
  MultiColoredIconSheet,
} from "./Icon.storybook.js";
import IconWrapper from "./IconWrapper";
import styles from "./Icon.scss";
import InfoIconV4 from "@src/components/UI/Icon/Icons/InfoIconV4";

# Icon

<CodeBlock>
  <Icon src="info" />
</CodeBlock>

# Configuration of New Icons

> Since New Icons and Multi coloured icons uses <InlineCode>Box</InlineCode> as a wrapper, it can inherit all its styling props as well

<ConfigBlock of={IconWrapper} />

> A clickable UI element with active and hover states. Indicates to the user that it's clickable.

## Icon Sheet

<CodeBlock>
  <IconSheet />
</CodeBlock>

## New Icon Sheet ( Color can be modified )

<CodeBlock>
  <NewIconSheet />
</CodeBlock>

## Multi colored Icon Sheet

<CodeBlock>
  <MultiColoredIconSheet />
</CodeBlock>

## Examples

<CodeBlock title="Type : Default">
  <Icon src="info" />
</CodeBlock>
<CodeBlock title="Type : Custom Class">
  <Icon src="info" className={`${styles.translucent}`} />
</CodeBlock>
<CodeBlock title="Type : Size(Extra small)">
  <Icon src="info" size="extraSmall" />
</CodeBlock>
<CodeBlock title="Type : Size(Small)">
  <Icon src="info" size="small" />
</CodeBlock>
<CodeBlock title="Type : Size(Medium/Default)">
  <Icon src="info" size="medium" />
</CodeBlock>
<CodeBlock title="Type : Size(Large)">
  <Icon src="info" size="big" />
</CodeBlock>
<CodeBlock title="Colored Icons">
  <InfoIconV4 iconColor="blue.haptik" />
</CodeBlock>
<CodeBlock title="Hover effect">
  <InfoIconV4 iconColor="blue.haptik" hoverEffect />
</CodeBlock>
<CodeBlock title="disabled">
  <InfoIconV4 iconColor="blue.haptik" disabled />
</CodeBlock>
<CodeBlock title="Type : With tooltip">
  <Icon src="info" tooltip="this is a demo tooltip" tooltipPosition="TOP" />
</CodeBlock>
<CodeBlock title="Type : New Icon with tooltip">
  <InfoIconV4
    tooltip="this is a demo tooltip"
    tooltipPosition="TOP"
    iconColor="blue.haptik"
  />
</CodeBlock>