import React from "react"
import { Modal as AntModal } from "antd"
import { Input, Select } from "@/components/ui"
import type { AssetKind } from "@/pages/assets/types"
import { LIBRARY_KIND_OPTIONS } from "@/pages/assets/constants"

/* ============================================================
 * CreateLibraryModal — 新建视频库弹窗
 * ============================================================ */
export interface CreateLibraryModalProps {
  open: boolean
  onCancel: () => void
  onOk: () => void
  name: string
  onNameChange: (value: string) => void
  kind: AssetKind
  onKindChange: (value: AssetKind) => void
  confirmLoading?: boolean
}

const CreateLibraryModal: React.FC<CreateLibraryModalProps> = ({
  open,
  onCancel,
  onOk,
  name,
  onNameChange,
  kind,
  onKindChange,
  confirmLoading,
}) => (
  <AntModal
    title="新建视频库"
    open={open}
    onCancel={onCancel}
    onOk={onOk}
    okText="创建"
    cancelText="取消"
    destroyOnClose
    confirmLoading={confirmLoading}
  >
    <div className="xx-asset-form-body">
      <div>
        <div className="xx-asset-form-label">名称</div>
        <Input
          placeholder="请输入视频库名称"
          value={name}
          onChange={(e) => onNameChange(e.target.value)}
          maxLength={50}
        />
      </div>
      <div>
        <div className="xx-asset-form-label">类型</div>
        <Select
          value={kind}
          onChange={(v) => onKindChange(v)}
          style={{ width: "100%" }}
          options={LIBRARY_KIND_OPTIONS}
        />
      </div>
    </div>
  </AntModal>
)

export default CreateLibraryModal