<script lang="ts">
	import { serializeJsonLd } from "#lib/seo/jsonLd.ts";

	interface Props {
		title?: string;
		description?: string;
		canonical?: string;
		type?: "website" | "profile" | "article";
		card?: "summary" | "summary_large_image";
		image?: string;
		video?: string;
		noindex?: boolean;
		jsonLd?: Record<string, unknown> | Array<Record<string, unknown>>;
	}

	let {
		title,
		description,
		canonical,
		type = "website",
		card = "summary_large_image",
		image,
		video,
		noindex = false,
		jsonLd
	}: Props = $props();

	const fullTitle = $derived(
		title
			? title.includes("·") || title.includes("&middot;")
				? title
				: `${title} · Tangled`
			: undefined
	);

	const schemas = $derived(jsonLd ? (Array.isArray(jsonLd) ? jsonLd : [jsonLd]) : []);
</script>

<svelte:head>
	{#if fullTitle}
		<title>{fullTitle}</title>
		<meta property="og:title" content={fullTitle} />
		<meta name="twitter:title" content={fullTitle} />
	{/if}
	{#if description}
		<meta name="description" content={description} />
		<meta property="og:description" content={description} />
		<meta name="twitter:description" content={description} />
	{/if}
	{#if canonical}
		<link rel="canonical" href={canonical} />
		<meta property="og:url" content={canonical} />
	{/if}
	{#if type}
		<meta property="og:type" content={type} />
	{/if}
	{#if card}
		<meta name="twitter:card" content={card} />
	{/if}
	<meta property="og:image" content={image || "https://assets.tangled.network/og-image.jpg"} />
	<meta property="og:image:width" content="1200" />
	<meta property="og:image:height" content="630" />
	<meta name="twitter:image" content={image || "https://assets.tangled.network/og-image.jpg"} />
	{#if video}
		<meta property="og:video" content={video} />
		<meta property="og:video:secure_url" content={video} />
		<meta property="og:video:type" content="video/mp4" />
		<meta property="og:video:width" content="1200" />
		<meta property="og:video:height" content="630" />
	{/if}
	{#if noindex}
		<meta name="robots" content="noindex, nofollow" />
	{/if}
	{#each schemas as schema (schema)}
		<!-- eslint-disable-next-line svelte/no-at-html-tags -- json-ld must be emitted as a script tag -->
		{@html `<script type="application/ld+json">${serializeJsonLd(schema)}<` + `/script>`}
	{/each}
</svelte:head>