import type { CoverageSource } from "@/types/article";
import { Newspaper } from "lucide-react";

export function CoverageList({ coverage }: { coverage: CoverageSource[] }) {
  if (coverage.length === 0) return null;

  return (
    <div className="rounded-card border border-ink-100 p-4 dark:border-ink-800">
      <h3 className="mb-3 flex items-center gap-2 text-sm font-bold">
        <Newspaper size={16} className="text-brand" />
        تغطية الخبر — مصادر أخرى نشرت نفس الخبر
      </h3>
      <ul className="space-y-2">
        {coverage.map((c) => (
          <li key={c.sourceUrl}>
            <a
              href={c.sourceUrl}
              target="_blank"
              rel="noopener noreferrer nofollow"
              className="text-sm text-ink-600 hover:text-brand hover:underline dark:text-ink-200"
            >
              {c.sourceName}
            </a>
          </li>
        ))}
      </ul>
    </div>
  );
}