import { ButtonHTMLAttributes, ComponentType, useState } from "react";
import { useTranslation } from "react-i18next";

import { cn } from "@/lib/utils";
import { Icon } from "@/shared";

import styles from "./IconButton.module.css";

interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
	titleKey: string;
	Icon: ComponentType<Icon>;
	color?: string;
	hoverColor?: string;
	width?: number;
	height?: number;
}

export function IconButton(props: Props) {
	const { t } = useTranslation();
	const {
		titleKey,
		Icon,
		color,
		hoverColor,
		width,
		height,
		className,
		...restProps
	} = props;
	const [isHovered, setIsHovered] = useState(false);

	return (
		<button
			{...restProps}
			onMouseEnter={() => setIsHovered(true)}
			onMouseLeave={() => setIsHovered(false)}
			className={cn(styles.button, className)}
			title={t(titleKey)}
		>
			<Icon
				color={isHovered ? (hoverColor ? hoverColor : color) : color}
				width={width}
				height={height}
			/>
		</button>
	);
}
