import type { Meta, StoryObj } from '@storybook/react';
import IconComponent from './Icon';
import type { IconProps } from './Icon';

const meta: Meta<typeof IconComponent> = {
  title: 'Base/Icon',
  component: IconComponent,
  tags: ['autodocs']
};

export default meta;

type Story = StoryObj<typeof meta>;

const icons: Array<IconProps['name']> = [
  'global',
  'facebook',
  'instagram',
  'x',
  'tiktok',
  'close',
  'linkedin',
  'menu',
  'search',
  'youtube',
  'chat',
  'up-arrow',
  'down-arrow',
  'left-arrow',
  'right-arrow',
  'phone',
  'email',
  'scroll',
  'location',
  'play',
  'long-left-arrow',
  'long-right-arrow',
  'chevron-down',
  'chevron-up',
  'small-right-arrow',
  'calendar',
  'book',
  'tick',
  'form',
  'tower',
  'area',
  'office',
  'email-light',
  'phone-light',
  'location-pin',
  'residence',
  'store',
  'download',
  'forward-arrow',
  'basement'
];

export const Icon: Story = {
  render: () => (
    <div className="flex gap-5 text-lg text-center flex-wrap">
      {icons.map((name) => (
        <div key={name}>
          <IconComponent name={name} />
          <p className="text-sm">{name}</p>
        </div>
      ))}
    </div>
  )
};
