import { Meta } from '@storybook/react';

import {
  CSSIconMinus,
  IconArrow,
  IconBin,
  IconBurger,
  IconChevron,
  IconClose,
  IconCopy,
  IconDraggable,
  IconEye,
  IconGoogle,
  IconHash,
  IconLike,
  IconOverflow,
  IconOverflowSm,
  IconPercent,
  IconPlay,
  IconPlus,
  IconReport,
  IconSearch,
  IconShare,
  IconText,
  IconTick,
  IconTooltip,
} from '@/components';

const meta: Meta<typeof CSSIconMinus> = {
  component: CSSIconMinus,
};

export default meta;

const icons = [
  { name: 'CSSIconMinus', icon: CSSIconMinus({}) },
  { name: 'IconArrow', icon: IconArrow({ stroke: '#191919' }) },
  { name: 'IconBin', icon: IconBin({}) },
  { name: 'IconBurger', icon: IconBurger({}) },
  { name: 'IconChevron', icon: IconChevron({}) },
  { name: 'IconClose', icon: IconClose({}) },
  { name: 'IconCopy', icon: IconCopy({}) },
  { name: 'IconDraggable', icon: IconDraggable({}) },
  { name: 'IconEye', icon: IconEye({}) },
  { name: 'IconGoogle', icon: IconGoogle({}) },
  { name: 'IconHash', icon: IconHash({}) },
  { name: 'IconLike', icon: IconLike({}) },
  { name: 'IconOverflow', icon: IconOverflow({}) },
  { name: 'IconOverflowSm', icon: IconOverflowSm({}) },
  { name: 'IconPercent', icon: IconPercent({}) },
  { name: 'IconPlay', icon: IconPlay({ className: '[&>*]:fill-[#191919]' }) },
  { name: 'IconPlus', icon: IconPlus({ stroke: '#191919' }) },
  { name: 'IconReport', icon: IconReport({}) },
  { name: 'IconSearch', icon: IconSearch({}) },
  { name: 'IconShare', icon: IconShare({}) },
  { name: 'IconText', icon: IconText({}) },
  { name: 'IconTick', icon: IconTick({ className: '[&>*]:stroke-[#191919]' }) },
  { name: 'IconTooltip', icon: IconTooltip({}) },
];

export function Icons() {
  return (
    <div className="w-20 flex flex-col items-center mx-8 [&>*]:mb-8 [&>*]:flex [&>*]:flex-col [&>*]:items-center">
      {icons.map((item, index) => (
        <div key={index}>
          <p className="bg-gray-ui-200 mb-4 px-2">{item.name}</p>
          <div className="w-8">{item.icon}</div>
        </div>
      ))}
    </div>
  );
}