import { IconExternalLink } from "@tabler/icons-react";

interface CitationItem {
  label: string;
  url: string;
}

interface SourcesCitationsProps {
  intro: string;
  items: CitationItem[];
  title: string;
}

export function SourcesCitations({
  title,
  intro,
  items,
}: SourcesCitationsProps) {
  return (
    <section className="relative overflow-hidden py-12 md:py-16">
      <div className="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8">
        <div className="mx-auto max-w-4xl rounded-2xl border border-[#333333] bg-[#1a1a1a]/60 p-6 backdrop-blur-sm md:p-8">
          <h3 className="mb-2 font-bold text-base text-white md:text-lg">
            {title}
          </h3>
          <p className="mb-4 text-neutral-300 text-sm">{intro}</p>
          <ul className="space-y-2">
            {items.map((item) => (
              <li key={item.url}>
                <a
                  className="inline-flex items-start gap-2 text-neutral-200 text-sm transition-colors hover:text-[#FD105E]"
                  href={item.url}
                  rel="noopener noreferrer nofollow"
                  target="_blank"
                >
                  <IconExternalLink
                    className="mt-1 h-3.5 w-3.5 shrink-0 text-neutral-500"
                    strokeWidth={1.5}
                  />
                  <span>{item.label}</span>
                </a>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}