import { Meta } from '@storybook/addon-docs/blocks';
import * as icons from '@tabler/icons-react';

<Meta
  title="Design System/Icons/Iconography"
  parameters={{
    viewMode: 'docs',
    previewTabs: {
      canvas: { hidden: true },
    },
  }}
/>

# Iconography

This section displays all available icons in our library, which uses the [`@tabler/icons-react`](https://tabler.io/icons) package.

## Usage

Tabler Icons are re-exported as `material-hu/icons` so to use an icon, simply import it from `material-hu/icons`:

```tsx
import { IconHome } from 'material-hu/icons';

function MyComponent() {
  return <IconHome size={24} />;
}
```

> ⚠️ **Warning**: To maintain consistency across the application, only use icons that start with `Icon` from the `material-hu/icons` collection. Do not use icons from other sources or packages. If you need an icon that is not available in this list, please consult with the design team first.

```tsx
// ✅ Do this
import { IconPlus } from 'material-hu/icons';

// ❌ Don't do this – DEPRECATED
import { PlusIcon } from 'material-hu/icons';
```

## Icon Gallery

Below is the complete list of available icons:

<div
  style={{
    display: 'grid',
    gridTemplateColumns: 'repeat(auto-fill, minmax(150px, 1fr))',
    gap: '1rem',
  }}
>
  {Object.keys(icons)
    .filter(icon => icon.startsWith('Icon'))
    .sort()
    .map(icon => {
      const IconComponent = icons[icon];
      return (
        <div
          key={icon}
          style={{
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            padding: '1rem',
            gap: '1rem',
            border: '1px solid #eee',
            borderRadius: '4px',
          }}
        >
          <IconComponent size={24} />
          <span>
            <pre style={{ fontSize: '0.75rem' }}>{icon}</pre>
          </span>
        </div>
      );
    })}
</div>
