---
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>