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

export interface Props {
	pack: string;
	emoji: string;
	size?: "125" | "150" | "200";
	class?: string;
}

export const Emoji = site.$.component(
	({ pack, emoji, size, class: cls, ...props }: Props, pages) => {
		const query = site.$.query(pages);
		const sprite = query.type(".svg").match({ emojiPack: pack }).one();

		return (
			<svg class:list={["o-emoji o-emoji--sprite", { [`o-emoji--${size}`]: size }, cls]} {...props}>
				<use href={`${sprite.url}#${emoji}`} />
			</svg>
		);
	},
);