---
export type Image = {
	src: string;
	alt: string;
};

export type SEOMetadata = {
	name: string;
	title: string;
	description: string;
	image: Image;
	canonicalURL?: URL | string | null;
	locale?: string;
};

export type OpenGraph = Partial<SEOMetadata> & {
	type?: string;
};

export type Twitter = Partial<SEOMetadata> & {
	handle?: string;
	card?: 'summary' | 'summary_large_image';
};

export type Props = SEOMetadata & {
	og?: OpenGraph;
	twitter?: Twitter;
};

const {
	name,
	title,
	description,
	image,
	locale = 'en',
	canonicalURL = new URL(Astro.url.pathname, Astro.site),
} = Astro.props;

const og = {
	name,
	title,
	description,
	canonicalURL,
	image,
	locale,
	type: 'website',
	...Astro.props.og,
} satisfies OpenGraph;

const twitter = {
	name,
	title,
	description,
	canonicalURL,
	image,
	locale,
	card: 'summary_large_image',
	...Astro.props.twitter,
} satisfies Twitter;

function formatCanonicalURL(url: string | URL) {
	const path = url.toString();
	const hasQueryParams = path.includes('?');
	if (hasQueryParams)
		path.replace(/\/?$/, '');
	return path.replace(/\/?$/, hasQueryParams ? '' : '');
}
---

<!-- Page Metadata -->
{canonicalURL && <link rel="canonical" href={formatCanonicalURL(canonicalURL)} />}
<meta name="description" content={description} />

<!-- OpenGraph Tags -->
<meta property="og:title" content={og.title} />
<meta property="og:type" content={og.type} />
{og.canonicalURL && <meta property="og:url" content={formatCanonicalURL(og.canonicalURL)} />}
<meta property="og:locale" content={og.locale} />
<meta property="og:description" content={og.description} />
<meta property="og:site_name" content={og.name} />
{og.image && <meta property="og:image" content={og.image.src} />}
{og.image && <meta property="og:image:alt" content={og.image.alt} />}

<!-- Twitter Tags -->
{twitter.card && <meta name="twitter:card" content={twitter.card} />}
{twitter.handle && <meta name="twitte:site" content={twitter.handle} />}
<meta name="twitter:title" content={twitter.title} />
<meta name="twitter:description" content={twitter.description} />
{twitter.image && <meta name="twitter:image" content={twitter.image.src} />}
{twitter.image && <meta name="twitter:image:alt" content={twitter.image.alt} />}