import type { Meta, StoryObj } from '@storybook/react'

import { AddCategory, AiPrompt, CodeAi, MessageAi1 } from '../../../src/components/icons/general'

// Icon 列表，包含组件和名称
const icons = [
  { Component: AddCategory, name: 'AddCategory' },
  { Component: AiPrompt, name: 'AiPrompt' },
  { Component: CodeAi, name: 'CodeAi' },
  { Component: MessageAi1, name: 'MessageAi1' }
]

interface IconsShowcaseProps {
  fontSize?: number
}

const IconsShowcase = ({ fontSize = 32 }: IconsShowcaseProps) => {
  return (
    <div className="flex flex-wrap gap-4 p-2">
      {icons.map(({ Component, name }) => (
        <div key={name} className="flex flex-col items-center justify-center">
          <div className="border-gray-200 border-1 rounded-md p-2 w-min" key={name} style={{ fontSize }}>
            <Component />
          </div>
          <p className="text-sm text-center mt-2">{name}</p>
        </div>
      ))}
    </div>
  )
}

const meta: Meta<typeof IconsShowcase> = {
  title: 'Components/Icons/General',
  component: IconsShowcase,
  parameters: {
    layout: 'fullscreen'
  },
  tags: ['autodocs'],
  argTypes: {
    fontSize: {
      control: { type: 'number', min: 16, max: 64, step: 4 },
      description: 'Icon 大小（通过 fontSize 控制，因为图标使用 1em 单位）',
      defaultValue: 32
    }
  }
}

export default meta
type Story = StoryObj<typeof IconsShowcase>

/**
 * 展示当前保留的 4 个通用图标
 *
 * 这些图标使用 SVGR 的 `icon: true` 选项生成，具有以下特点：
 * - 使用 `width="1em"` 和 `height="1em"`，响应父元素的 `fontSize`
 * - 保留所有原始 SVG 属性（颜色、渐变、clipPath 等）
 * - 支持标准的 SVG props（className, style, onClick 等）
 *
 * ## 使用示例
 *
 * ```tsx
 * import { CodeAi } from '@cherrystudio/ui/icons'
 *
 * // 通过 fontSize 控制大小
 * <div style={{ fontSize: 24 }}>
 *   <CodeAi />
 * </div>
 *
 * // 通过 className 控制（Tailwind）
 * <CodeAi className="text-2xl" />
 *
 * // 使用标准 SVG props
 * <CodeAi className="hover:opacity-80" onClick={handleClick} />
 * ```
 */
export const AllIcons: Story = {
  args: {
    fontSize: 32
  }
}
