xiaoxia-saas/apps/web/src/components/asset-selector/PreviewOverlay.tsx

import React from "react"
import type { MediaAsset } from "@/api/template-editor"
import { MATERIAL_TYPE_LABELS, MATERIAL_TYPE_ICONS } from "@/api/template-editor"
import { formatSize, formatDuration } from "./utils"

interface PreviewOverlayProps {
  asset: MediaAsset
  position: { x: number; y: number }
}

const PreviewOverlay: React.FC<PreviewOverlayProps> = ({ asset, position }) => {
  return (
    <div className="as-preview-overlay" style={{ left: position.x, top: position.y }}>
      <div className="as-preview-overlay-thumb">
        {asset.type === "video" && asset.source_url ? (
          <video
            src={asset.source_url}
            autoPlay
            muted
            loop
            playsInline
            poster={asset.thumbnail_url}
          />
        ) : asset.thumbnail_url ? (
          <img src={asset.thumbnail_url} alt={asset.name} />
        ) : (
          <span className="as-preview-overlay-thumb-icon">{MATERIAL_TYPE_ICONS[asset.type]}</span>
        )}
      </div>
      <p className="as-preview-overlay-name">{asset.name}</p>
      <div className="as-preview-overlay-meta">
        <span>类型: {MATERIAL_TYPE_LABELS[asset.type]}</span>
        {asset.duration != null && <span>时长: {formatDuration(asset.duration)}</span>}
        {asset.size != null && <span>大小: {formatSize(asset.size)}</span>}
        {asset.quality_score != null && <span>质量分: {asset.quality_score}</span>}
        {asset.tags.length > 0 && <span>标签: {asset.tags.join(", ")}</span>}
      </div>
    </div>
  )
}

export default PreviewOverlay