import { ExternalLink } from "lucide-react";

export function SourceAttribution({ sourceName, sourceUrl }: { sourceName: string; sourceUrl: string }) {
  return (
    <div className="flex flex-wrap items-center justify-between gap-3 rounded-card border border-ink-100 bg-ink-50 p-4 dark:border-ink-800 dark:bg-ink-800/40">
      <p className="text-sm text-ink-600 dark:text-ink-200">
        المصدر: <span className="font-medium text-ink-900 dark:text-ink-50">{sourceName}</span>
      </p>
      <a
        href={sourceUrl}
        target="_blank"
        rel="noopener noreferrer nofollow"
        className="flex items-center gap-1.5 rounded-full bg-brand px-4 py-2 text-sm font-medium text-white hover:bg-brand-dark"
      >
        قراءة الخبر من المصدر
        <ExternalLink size={14} />
      </a>
    </div>
  );
}