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

/**
 * 单个智能匹配卡片
 */
import React from "react"
import { PlayCircleOutlined, CheckCircleFilled } from "@ant-design/icons"
import type { AssetItem } from "@/api/assets"

interface SmartMatchResultItem {
  asset: AssetItem
  matchScore: number
  matchReason: string
}

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

const SmartMatchCard: React.FC<SmartMatchCardProps> = ({
  result,
  selected,
  onClick,
  formatDuration,
}) => {
  const { asset, matchScore, matchReason } = result
  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>
        )}
        <div className="xx-smart-match-score">{matchScore}%</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 className="xx-smart-match-reason">🎯 {matchReason}</div>
      </div>
    </div>
  )
}

export default SmartMatchCard