import type { JSX } from "react";

type IconName = "notification" | "download" | "close";
const paths: Record<IconName, JSX.Element> = {
	notification: (
		<>
			<path d="M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9ZM10 21h4" />
		</>
	),
	download: (
		<>
			<path d="M12 3v12m-5-5 5 5 5-5M4 16v5h16v-5" />
		</>
	),
	close: (
		<>
			<path d="m6 6 12 12M6 18 18 6" />
		</>
	),
};

export function CanvasIcon({ name }: { name: IconName }): JSX.Element {
	return (
		<svg
			width="20"
			height="20"
			viewBox="0 0 24 24"
			fill="none"
			stroke="currentColor"
			strokeWidth="1.75"
			strokeLinecap="round"
			strokeLinejoin="round"
			aria-hidden="true"
			focusable="false"
		>
			{paths[name]}
		</svg>
	);
}