import { clsx } from "@/lib/cx";

import { isAllowedSourceHost } from "@/lib/neutrality";

export function SourceLink({

  url,

  label = "Source",

  className,

}: {

  url: string;

  label?: string;

  className?: string;

}) {

  const allowed = isAllowedSourceHost(url);

  const host = safeHost(url);

  const safeHref = /^https?:\/\

  return (

    <a

      href={safeHref}

      target="_blank"

      rel="noopener noreferrer nofollow"

      className={clsx(

        "focus-ring label inline-flex min-h-[40px] max-w-full flex-wrap items-center gap-x-1 gap-y-0.5 rounded-[3px] border border-line px-2 py-1 underline underline-offset-4 transition-colors",

        allowed

          ? "text-ash hover:text-paper hover:border-paper"

          : "text-nay",

        className

      )}

      title={allowed ? `Official record · ${host}` : "Source host not allowlisted"}

    >

      {

}

      <span className="inline-flex items-center gap-x-1 whitespace-nowrap">

        <span aria-hidden="true">↗</span>

        <span>

          {label}

          {allowed && host ? <span className="text-ash-2"> ·</span> : null}

        </span>

      </span>

      {allowed && host ? (

        <span className="text-[11px] tracking-normal text-ash-2 [overflow-wrap:anywhere]">

          {host}

        </span>

      ) : null}

    </a>

  );

}

function safeHost(url: string): string {

  try {

    return new URL(url).host.replace(/^www\./, "");

  } catch {

    return "";

  }

}