import {
  Canvas,
  Controls,
  Meta,
  Source,
  Story,
  Subtitle,
  Title,
} from '@storybook/addon-docs/blocks'
import * as BlocksIconStories from './BlocksIcons.stories'
import { LifecycleTag } from '../docs/components/LifecycleTag'
import { SourceLinks } from '../docs/components/SourceLinks'

<Meta title="Icons/Blocks Icons" of={BlocksIconStories} />

<Title>Blocks Icons</Title>
<Subtitle>A comprehensive icon library for Blocks design system.</Subtitle>
<SourceLinks
  links={[
    {
      label: 'Blocks Icons',
      href: 'https://www.npmjs.com/package/@chainlink/blocks-icons',
    },
  ]}
/>
<LifecycleTag variant="In Development" />

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

<div className="h-8" />

## Installation

Blocks Icons is a peer dependency of Blocks and must be installed for Blocks to work correctly.

```bash
npm install @chainlink/blocks-icons
```

<div className="h-8" />

## Usage

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

```tsx
import { SvgAdd1 } from '@chainlink/blocks-icons'

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

<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={BlocksIconStories.Colors} />
<Story of={BlocksIconStories.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 colors

<Story of={BlocksIconStories.AllColors} />