xiaoxia-saas/apps/web/src/pages/generate/components/material/SmartMatchCard.tsx

/**
 * 智能匹配卡片（Q5 简化版）
 * 只展示素材缩略图、名称、时长，无匹配分数
 */
import React from "react"
import { PlayCircleOutlined, CheckCircleFilled } from "@ant-design/icons"
import type { AssetItem } from "@/api/assets"

interface SmartMatchCardProps {
  asset: AssetItem
  selected: boolean
  onClick: () => void
  formatDuration: (seconds: number) => string
}

const SmartMatchCard: React.FC<SmartMatchCardProps> = ({
  asset,
  selected,
  onClick,
  formatDuration,
}) => {
  return (
    <div className={`xx-smart-match-card ${selected ? "selected" : ""}`} onClick={onClick}>
      {/* 缩略图 */}
      <div className="xx-smart-match-thumb">
        {asset.thumbnail_url ? (
          <img src={asset.thumbnail_url} alt={asset.name} />
        ) : (
          <div className="xx-smart-match-thumb-placeholder">
            <PlayCircleOutlined style={{ fontSize: 32, opacity: 0.5 }} />
          </div>
        )}
        {selected && (
          <div className="xx-smart-match-check">
            <CheckCircleFilled style={{ fontSize: 20, color: "#fff" }} />
          </div>
        )}
        {asset.duration && (
          <div className="xx-smart-match-duration">{formatDuration(asset.duration)}</div>
        )}
      </div>
      {/* 名称 */}
      <div className="xx-smart-match-info">
        <div className="xx-smart-match-name" title={asset.name}>
          {asset.name}
        </div>
      </div>
    </div>
  )
}

export default SmartMatchCard