import type { HTMLAttributes } from "corvos/plugins/jsx.ts";

import site from "@/corvos.config.ts";

export type Props = HTMLAttributes<"a"> & {
	size?: "sm" | "lg";
	variant?: "static-black" | "static-white";
};

export const Logo = async ({ size, variant, class: cls, ...props }: Props) => {
	const symbols = await site.load("assets/symbols.svg");

	return (
		<a
			aria-label="Home"
			class:list={[
				"c-logo",
				{
					[`c-logo--${size}`]: size,
					[`c-logo--${variant}`]: variant,
				},
				cls,
			]}
			href={site.$.url()}
			rel="home"
			{...props}
		>
			<svg class="c-logo__img">
				<title>Logo</title>
				<use href={`${symbols.url}#logo${size === "sm" ? "-sm" : ""}`} />
			</svg>
		</a>
	);
};