<script lang="ts">
import { siteUrl } from "$lib/Utility/appOrigin";
import locale from "$stores/locale";
import type { Locale } from "$lib/Locale/layout";

type HeadTitleKey = keyof NonNullable<Locale["headTitle"]>;

let {
	route = undefined,
	routeKey = undefined,
	path = "/",
}: {
	route?: string;
	routeKey?: HeadTitleKey;
	path?: string;
} = $props();

const resolved = $derived(
	routeKey ? ($locale().headTitle?.[routeKey] ?? routeKey) : route,
);
const title = $derived((resolved ? `${resolved} • ` : "") + "due.moe");
</script>

<svelte:head>
  <!-- Facebook -->
  <meta name="og:url" property="og:url" content={siteUrl(path)} />
  <meta name="og:title" property="og:title" content={title} />

  <!-- Twitter -->
  <meta name="twitter:url" property="twitter:url" content={siteUrl(path)} />
  <meta name="twitter:title" property="twitter:title" content={title} />

  <title>{title}</title>
</svelte:head>
