import {
  Canvas,
  Controls,
  Description,
  Meta,
  Source,
  Story,
  Subtitle,
  Title,
} from '@storybook/addon-docs/blocks'
import { SvgWarningCircle } from '@chainlink/blocks-icons'
import * as Icons from './library/Interface'
import * as IconStories from './Icons.stories'
import { LifecycleTag } from '../docs/components/LifecycleTag'
import { Typography, Card } from '../components'

<Meta of={IconStories} />

<Title>Icons</Title>
<Subtitle>An extensive SVG Icon library</Subtitle>
<LifecycleTag variant="Legacy" />
<div className="h-8" />

<Card className="flex gap-4 px-4">
  <SvgWarningCircle className="mt-4" height={36} width={36} color="error" />
  <div className="text-error-foreground">
    This icon library imported directly from `@chainlink/blocks` is legacy and
    although supported for the time being, this will be deprecated in the next
    release. Please migrate to the new Blocks Icons library imported from
    `@chainlink/blocks-icons` for future development.
  </div>
</Card>

<Canvas of={IconStories.Default} layout="padded" sourceState="shown" />
<Controls />

<div className="h-8" />

## Usage

To use the icons, import them from the @chainlink/blocks package and include them in your component. For example:

```tsx
import { AcgAdd } from '@chainlink/blocks'

function MyComponent() {
  return (
    <div>
      <AcgAdd width={24} height={24} />
    </div>
  )
}
```

<div className="h-8" />

## `color` prop

Use the `color` prop to modify the SVG's color. The available options match the Blocks design color tokens, ensuring consistency across your application. Our icons work with dark mode.<div className="h-8" />

<Source of={IconStories.Colors} />
<Story of={IconStories.Colors} />

## Element Rendering

Our icons are rendered as native SVG elements, so you can pass any standard SVG attribute—such as className, width, or size, to them for customization.

<div className="h-8" />

## All available icons:

### Arrows

<Story of={IconStories.Arrows} />

### Commerce

<Story of={IconStories.Commerce} />

### Entertainment

<Story of={IconStories.Entertainment} />

### Interface

<Story of={IconStories.Interface} />

### Living

<Story of={IconStories.Living} />

### Mail

<Story of={IconStories.Mail} />

### Technology

<Story of={IconStories.Technology} />

### Travel

<Story of={IconStories.Travel} />

<div className="h-8" />

## All colors

<Story of={IconStories.AllColors} />