import type { SVGProps } from "react";

type IconProps = SVGProps<SVGSVGElement> & { size?: number };

function IconSvg({
	children,
	size = 24,
	viewBox = "0 0 24 24",
	...props
}: IconProps & { viewBox?: string }) {
	return (
		<svg
			xmlns="http://www.w3.org/2000/svg"
			viewBox={viewBox}
			width={size}
			height={size}
			shapeRendering="crispEdges"
			{...props}
		>
			{children}
		</svg>
	);
}

export function HabboHome({ size, ...props }: IconProps) {
	return (
		<IconSvg size={size} viewBox="0 0 24 24" {...props}>
			<rect x="4" y="10" width="16" height="12" fill="#e8a317" rx="1" />
			<rect x="3" y="9" width="18" height="2" fill="#d4891a" />
			<polygon points="12,2 2,10 22,10" fill="#c0392b" />
			<polygon points="12,2 2,10 4,10" fill="#a93226" />
			<rect x="9" y="15" width="6" height="7" fill="#8B4513" rx="1" />
			<rect x="10" y="16" width="4" height="3" fill="#d4a017" rx="1" />
		</IconSvg>
	);
}

export function HabboUser({ size, ...props }: IconProps) {
	return (
		<IconSvg size={size} viewBox="0 0 24 24" {...props}>
			<circle cx="12" cy="6" r="4.5" fill="#f1c40f" />
			<rect x="5" y="11" width="14" height="12" fill="#3498db" rx="2" />
			<rect x="5" y="11" width="14" height="3" fill="#2980b9" rx="1" />
			<rect x="2" y="20" width="20" height="3" fill="#2c3e50" rx="1" />
		</IconSvg>
	);
}

export function HabboCatalog({ size, ...props }: IconProps) {
	return (
		<IconSvg size={size} viewBox="0 0 24 24" {...props}>
			<rect x="3" y="4" width="18" height="16" fill="#e74c3c" rx="2" />
			<rect x="3" y="4" width="18" height="4" fill="#c0392b" rx="1" />
			<rect x="10" y="8" width="4" height="12" fill="#f1c40f" />
			<rect x="3" y="11" width="18" height="2" fill="#c0392b" />
			<rect x="8" y="4" width="8" height="3" fill="#f1c40f" rx="1" />
		</IconSvg>
	);
}

export function HabboStar({ size, ...props }: IconProps) {
	return (
		<IconSvg size={size} viewBox="0 0 24 24" {...props}>
			<rect x="10" y="1" width="4" height="6" fill="#f1c40f" rx="1" />
			<rect x="10" y="17" width="4" height="6" fill="#f1c40f" rx="1" />
			<rect x="1" y="10" width="6" height="4" fill="#f1c40f" rx="1" />
			<rect x="17" y="10" width="6" height="4" fill="#f1c40f" rx="1" />
			<rect x="6" y="5" width="4" height="4" fill="#f39c12" rx="1" />
			<rect x="14" y="5" width="4" height="4" fill="#f39c12" rx="1" />
			<rect x="6" y="15" width="4" height="4" fill="#f39c12" rx="1" />
			<rect x="14" y="15" width="4" height="4" fill="#f39c12" rx="1" />
			<rect x="9" y="9" width="6" height="6" fill="#f1c40f" rx="1" />
		</IconSvg>
	);
}

export function HabboCommunity({ size, ...props }: IconProps) {
	return (
		<IconSvg size={size} viewBox="0 0 24 24" {...props}>
			<circle cx="7" cy="7" r="4" fill="#2ecc71" />
			<circle cx="17" cy="7" r="4" fill="#3498db" />
			<rect x="2" y="13" width="10" height="9" fill="#2ecc71" rx="2" />
			<rect x="12" y="13" width="10" height="9" fill="#3498db" rx="2" />
			<rect x="2" y="13" width="10" height="3" fill="#27ae60" rx="1" />
			<rect x="12" y="13" width="10" height="3" fill="#2980b9" rx="1" />
		</IconSvg>
	);
}

export function HabboGames({ size, ...props }: IconProps) {
	return (
		<IconSvg size={size} viewBox="0 0 24 24" {...props}>
			<rect x="2" y="7" width="20" height="12" fill="#9b59b6" rx="3" />
			<rect x="2" y="7" width="20" height="3" fill="#8e44ad" rx="1" />
			<circle cx="8" cy="14" r="2" fill="#f1c40f" />
			<rect x="12" y="12" width="6" height="4" fill="#ecf0f1" rx="1" />
			<circle cx="16" cy="14" r="1" fill="#e74c3c" />
			<rect x="4" y="4" width="3" height="4" fill="#e74c3c" rx="1" />
			<rect x="17" y="4" width="3" height="4" fill="#2ecc71" rx="1" />
		</IconSvg>
	);
}

export function HabboEnter({ size, ...props }: IconProps) {
	return (
		<IconSvg size={size} viewBox="0 0 24 24" {...props}>
			<rect x="3" y="3" width="18" height="18" fill="#2ecc71" rx="2" />
			<rect x="3" y="3" width="18" height="4" fill="#27ae60" rx="1" />
			<polygon points="11,8 18,13 11,18" fill="#ecf0f1" />
			<rect x="5" y="11" width="8" height="4" fill="#27ae60" rx="1" />
		</IconSvg>
	);
}

export function HabboNews({ size, ...props }: IconProps) {
	return (
		<IconSvg size={size} viewBox="0 0 24 24" {...props}>
			<rect x="3" y="2" width="18" height="20" fill="#ecf0f1" rx="2" />
			<rect x="3" y="2" width="18" height="4" fill="#e74c3c" rx="1" />
			<rect x="5" y="8" width="14" height="2" fill="#bdc3c7" rx="1" />
			<rect x="5" y="11" width="10" height="2" fill="#bdc3c7" rx="1" />
			<rect x="5" y="14" width="14" height="2" fill="#bdc3c7" rx="1" />
			<rect x="5" y="17" width="8" height="2" fill="#bdc3c7" rx="1" />
			<rect x="3" y="2" width="18" height="4" fill="#c0392b" rx="1" />
		</IconSvg>
	);
}

export function HabboOnline({ size, ...props }: IconProps) {
	return (
		<IconSvg size={size} viewBox="0 0 24 24" {...props}>
			<circle cx="8" cy="8" r="5" fill="#2ecc71" />
			<circle cx="16" cy="8" r="5" fill="#2ecc71" />
			<rect x="3" y="14" width="10" height="8" fill="#27ae60" rx="2" />
			<rect x="11" y="14" width="10" height="8" fill="#27ae60" rx="2" />
			<circle cx="8" cy="8" r="2" fill="#ecf0f1" />
			<circle cx="16" cy="8" r="2" fill="#ecf0f1" />
		</IconSvg>
	);
}

export function HabboCamera({ size, ...props }: IconProps) {
	return (
		<IconSvg size={size} viewBox="0 0 24 24" {...props}>
			<rect x="4" y="7" width="16" height="12" fill="#7f8c8d" rx="2" />
			<rect x="4" y="7" width="16" height="3" fill="#6c7a7d" rx="1" />
			<rect x="9" y="4" width="6" height="4" fill="#2c3e50" rx="1" />
			<circle cx="12" cy="14" r="4" fill="#34495e" />
			<circle cx="12" cy="14" r="2.5" fill="#ecf0f1" />
			<rect x="16" y="9" width="2" height="2" fill="#e74c3c" rx="1" />
		</IconSvg>
	);
}

export function HabboChat({ size, ...props }: IconProps) {
	return (
		<IconSvg size={size} viewBox="0 0 24 24" {...props}>
			<rect x="2" y="3" width="20" height="14" fill="#3498db" rx="2" />
			<rect x="2" y="3" width="20" height="3" fill="#2980b9" rx="1" />
			<polygon points="6,17 10,22 10,17" fill="#3498db" />
			<rect x="5" y="7" width="5" height="2" fill="#ecf0f1" rx="1" />
			<rect x="5" y="10" width="8" height="2" fill="#ecf0f1" rx="1" />
			<rect x="5" y="13" width="6" height="2" fill="#ecf0f1" rx="1" />
		</IconSvg>
	);
}

export function HabboClock({ size, ...props }: IconProps) {
	return (
		<IconSvg size={size} viewBox="0 0 24 24" {...props}>
			<circle cx="12" cy="12" r="10" fill="#ecf0f1" stroke="#bdc3c7" strokeWidth="1" />
			<circle cx="12" cy="12" r="3" fill="#f1c40f" />
			<rect x="11" y="5" width="2" height="7" fill="#2c3e50" rx="1" />
			<rect x="11" y="11" width="5" height="2" fill="#2c3e50" rx="1" />
			<circle cx="12" cy="12" r="1" fill="#e74c3c" />
		</IconSvg>
	);
}

export function HabboHeart({ size, ...props }: IconProps) {
	return (
		<IconSvg size={size} viewBox="0 0 24 24" {...props}>
			<rect x="3" y="5" width="6" height="6" fill="#e74c3c" rx="1" />
			<rect x="15" y="5" width="6" height="6" fill="#e74c3c" rx="1" />
			<rect x="3" y="9" width="6" height="6" fill="#c0392b" rx="1" />
			<rect x="15" y="9" width="6" height="6" fill="#c0392b" rx="1" />
			<rect x="7" y="3" width="10" height="4" fill="#e74c3c" rx="1" />
			<rect x="7" y="15" width="2" height="4" fill="#e74c3c" rx="1" />
			<rect x="15" y="15" width="2" height="4" fill="#e74c3c" rx="1" />
			<rect x="9" y="17" width="6" height="4" fill="#e74c3c" rx="1" />
		</IconSvg>
	);
}

export function HabboArrowRight({ size, ...props }: IconProps) {
	return (
		<IconSvg size={size} viewBox="0 0 24 24" {...props}>
			<rect x="2" y="9" width="14" height="6" fill="#ecf0f1" rx="1" />
			<polygon points="16,3 24,12 16,21" fill="#2ecc71" />
		</IconSvg>
	);
}

export function HabboCog({ size, ...props }: IconProps) {
	return (
		<IconSvg size={size} viewBox="0 0 24 24" {...props}>
			<circle cx="12" cy="12" r="5" fill="#7f8c8d" />
			<circle cx="12" cy="12" r="3" fill="#95a5a6" />
			<rect x="10" y="1" width="4" height="5" fill="#7f8c8d" rx="1" />
			<rect x="10" y="18" width="4" height="5" fill="#7f8c8d" rx="1" />
			<rect x="1" y="10" width="5" height="4" fill="#7f8c8d" rx="1" />
			<rect x="18" y="10" width="5" height="4" fill="#7f8c8d" rx="1" />
			<rect x="4" y="4" width="3" height="3" fill="#7f8c8d" rx="1" />
			<rect x="17" y="4" width="3" height="3" fill="#7f8c8d" rx="1" />
			<rect x="4" y="17" width="3" height="3" fill="#7f8c8d" rx="1" />
			<rect x="17" y="17" width="3" height="3" fill="#7f8c8d" rx="1" />
		</IconSvg>
	);
}

export function HabboFurni({ size, ...props }: IconProps) {
	return (
		<IconSvg size={size} viewBox="0 0 24 24" {...props}>
			<rect x="4" y="6" width="7" height="12" fill="#e67e22" rx="1" />
			<rect x="13" y="6" width="7" height="12" fill="#e67e22" rx="1" />
			<rect x="2" y="4" width="11" height="3" fill="#d35400" rx="1" />
			<rect x="11" y="4" width="11" height="3" fill="#d35400" rx="1" />
			<rect x="6" y="14" width="3" height="4" fill="#f1c40f" rx="1" />
			<rect x="15" y="14" width="3" height="4" fill="#f1c40f" rx="1" />
			<rect x="2" y="16" width="20" height="4" fill="#8B4513" rx="1" />
		</IconSvg>
	);
}

export function HabboDiamond({ size, ...props }: IconProps) {
	return (
		<IconSvg size={size} viewBox="0 0 24 24" {...props}>
			<rect x="8" y="3" width="8" height="4" fill="#85e0e8" rx="1" />
			<rect x="4" y="7" width="16" height="4" fill="#6cc8d0" rx="1" />
			<rect x="2" y="11" width="20" height="4" fill="#5bb0b8" rx="1" />
			<rect x="4" y="15" width="16" height="4" fill="#4a98a0" rx="1" />
			<rect x="8" y="19" width="8" height="2" fill="#398088" rx="1" />
		</IconSvg>
	);
}

export function HabboCredits({ size, ...props }: IconProps) {
	return (
		<IconSvg size={size} viewBox="0 0 24 24" {...props}>
			<circle cx="12" cy="12" r="10" fill="#f1c40f" />
			<circle cx="12" cy="12" r="8" fill="#e67e22" />
			<rect x="10" y="5" width="4" height="14" fill="#f1c40f" rx="1" />
			<rect x="6" y="9" width="12" height="4" fill="#f1c40f" rx="1" />
		</IconSvg>
	);
}

export function HabboDuckets({ size, ...props }: IconProps) {
	return (
		<IconSvg size={size} viewBox="0 0 24 24" {...props}>
			<circle cx="12" cy="12" r="10" fill="#e67e22" />
			<circle cx="12" cy="12" r="8" fill="#d35400" />
			<rect x="9" y="4" width="6" height="6" fill="#f39c12" rx="1" />
			<rect x="7" y="10" width="10" height="4" fill="#f39c12" rx="1" />
			<rect x="9" y="14" width="6" height="6" fill="#f39c12" rx="1" />
		</IconSvg>
	);
}

export function HabboRank({ size, ...props }: IconProps) {
	return (
		<IconSvg size={size} viewBox="0 0 24 24" {...props}>
			<rect x="10" y="2" width="4" height="6" fill="#f1c40f" rx="1" />
			<rect x="6" y="8" width="12" height="4" fill="#2ecc71" rx="1" />
			<rect x="4" y="12" width="16" height="4" fill="#3498db" rx="1" />
			<rect x="2" y="16" width="20" height="4" fill="#9b59b6" rx="1" />
			<rect x="10" y="20" width="4" height="2" fill="#e74c3c" rx="1" />
		</IconSvg>
	);
}

const iconMap = {
	home: HabboHome,
	user: HabboUser,
	catalog: HabboCatalog,
	star: HabboStar,
	community: HabboCommunity,
	games: HabboGames,
	enter: HabboEnter,
	news: HabboNews,
	online: HabboOnline,
	camera: HabboCamera,
	chat: HabboChat,
	clock: HabboClock,
	heart: HabboHeart,
	arrowRight: HabboArrowRight,
	cog: HabboCog,
	furni: HabboFurni,
	diamond: HabboDiamond,
	credits: HabboCredits,
	duckets: HabboDuckets,
	rank: HabboRank,
};

export type HabboIconName = keyof typeof iconMap;

export function HabboIcon({ name, size, ...props }: IconProps & { name: HabboIconName }) {
	const Icon = iconMap[name];
	return <Icon size={size} {...props} />;
}