import React from "react"
import { Select as AntSelect } from "antd"
import Modal from "@/components/ui/Modal"
import { CATEGORY_OPTIONS } from "@/pages/assets/constants"

/* ============================================================
 * BatchClassifyModal — 批量改分类弹窗
 * ============================================================ */
export interface BatchClassifyModalProps {
  open: boolean
  selectedCount: number
  onCancel: () => void
  onOk: () => void
  category: string
  onCategoryChange: (value: string) => void
  confirmLoading?: boolean
}

const BatchClassifyModal: React.FC<BatchClassifyModalProps> = ({
  open,
  selectedCount,
  onCancel,
  onOk,
  category,
  onCategoryChange,
  confirmLoading,
}) => (
  <Modal
    title={`批量改分类（${selectedCount} 个素材）`}
    open={open}
    onCancel={onCancel}
    onOk={onOk}
    confirmLoading={confirmLoading}
    okText="确认修改"
    cancelText="取消"
  >
    <div className="xx-batch-classify-modal">
      <p className="xx-batch-classify-hint">将选中的 {selectedCount} 个素材统一修改为以下分类：</p>
      <AntSelect
        value={category || undefined}
        onChange={(v) => onCategoryChange(v)}
        placeholder="请选择分类"
        style={{ width: "100%" }}
        options={CATEGORY_OPTIONS}
      />
    </div>
  </Modal>
)

export default BatchClassifyModal