import React from "react"
import { Tag } from "@/components/ui"
import type { DuplicateSegment } from "@/api/duplication"
import { SegmentCard } from "./SegmentCard"

interface SegmentsSectionProps {
  segments?: DuplicateSegment[]
}

/**
 * 重复片段列表区域
 */
export const SegmentsSection: React.FC<SegmentsSectionProps> = ({ segments = [] }) => (
  <div className="dup-checks-section">
    <h3>
      🔍 重复片段详情
      <Tag variant="primary" style={{ marginLeft: 8 }}>
        {segments.length} 个片段
      </Tag>
    </h3>

    {segments.length > 0 ? (
      <div className="dup-checks-list">
        {segments.map((segment, index) => (
          <SegmentCard key={segment.id} segment={segment} index={index} />
        ))}
      </div>
    ) : (
      <div className="dup-results-empty" style={{ padding: "32px 0" }}>
        <div className="dup-results-empty-icon">🎉</div>
        <p>未发现重复片段，内容原创度很高</p>
      </div>
    )}
  </div>
)