---

type Link = {

	id: number;

	short_id: string;

	title: string;

	url: string;

	category_id: number;

	created_at: number;

	favicon_url?: string | null;

};

const { link } = Astro.props as { link: Link };

const domain = new URL(link.url).hostname.replace(/^www\./, "");

---

<article class="flex flex-col py-3 border-b border-[#333]">

	<a

		href={link.url}

		target="_blank"

		rel="noopener noreferrer"

		class="inline-flex items-start gap-2 text-base hover:opacity-70 transition-opacity"

	>

		{link.favicon_url && (

			<img

				src={link.favicon_url}

				alt={`Favicon for ${domain}`}

				width="16"

				height="16"

				loading="lazy"

				class="w-4 h-4 rounded-sm shrink-0 mt-1"

				onerror="this.style.display='none';this.nextElementSibling.style.display='inline-block'"

			/>

		)}

		<svg

			xmlns="http://www.w3.org/2000/svg"

			width="16"

			height="16"

			viewBox="0 0 256 256"

			class="w-4 h-4 shrink-0 mt-1"

			style={link.favicon_url ? "display:none" : ""}

			aria-hidden="true"

		>

			<path

				fill="currentColor"

				d="M216 40H40a16 16 0 0 0-16 16v144a16 16 0 0 0 16 16h176a16 16 0 0 0 16-16V56a16 16 0 0 0-16-16m0 16v32H40V56Zm0 144H40v-96h176z"

			/>

		</svg>

		<span>{link.title}</span>

	</a>

	<span class="text-xs opacity-50 mt-0.5">{domain}</span>

</article>