'use client'

import { Loader2, FileText, X } from 'lucide-react'
import type { PendingAttachment } from '@/lib/h5/types'

/**
 * H5 输入栏上方的附件预览 tray：图片缩略图 / 文件 chip，上传中显示 spinner。
 * 空数组返回 null（主组件无需条件渲染）。
 */
export function H5AttachTray({
  attachments,
  onRemove,
}: {
  attachments: PendingAttachment[]
  onRemove: (filename: string) => void
}): React.JSX.Element | null {
  if (attachments.length === 0) return null
  return (
    <div className="h5-attach-tray">
      {attachments.map((att) => (
        <div key={att.filename} className="h5-attach-chip">
          {att.isImage && !att.uploading ? (
            // eslint-disable-next-line @next/next/no-img-element
            <img src={`/api/upload/${att.filename}`} alt={att.name} className="h5-attach-thumb" />
          ) : (
            <div className="h5-attach-icon-wrap">
              {att.uploading ? <Loader2 size={14} className="h5-spin" /> : <FileText size={14} />}
            </div>
          )}
          <span className="h5-attach-name">{att.name}</span>
          {!att.uploading ? (
            <button
              type="button"
              className="h5-attach-remove"
              onClick={() => onRemove(att.filename)}
              aria-label="移除附件"
            >
              <X size={12} />
            </button>
          ) : null}
        </div>
      ))}
    </div>
  )
}