import Git from "../assets/git.svg?react";
import LinkedIn from "../assets/linkedin.svg?react";
import Mastodon from "../assets/mastodon.svg?react";
import DarkModeToggleIcon from "../assets/darkmodetoggle.svg?react";

type ImageLinkProps = {
	href: string;
	title: string;
	Image: typeof Git; // Not ideal, but I can't figure out how to import the type directly from the declared wildcard module
};

const ImageLink = ({ href, title, Image }: ImageLinkProps) => (
	<a rel="me" href={href} title={title} className="footerAction">
		<Image width="100%" />
	</a>
);

const Links = () => (
	<div className="links">
		<ImageLink href="https://git.mmbradley.ca/MichaelBradley/" title="Forgejo instance" Image={Git} />
		<ImageLink href="https://www.linkedin.com/in/michaelmbradley/" title="LinkedIn account" Image={LinkedIn} />
		<ImageLink href="https://mstdn.ca/@michaelbradley/" title="Mastodon account" Image={Mastodon} />
		<input id="dark-mode-toggle" type="checkbox" aria-label="Toggle dark mode" />
		<label htmlFor="dark-mode-toggle" id="dark-mode-toggle-label" title="Toggle dark mode" className="footerAction">
			<DarkModeToggleIcon width="100%" />
		</label>
	</div>
);

export default Links;