import clsx from "clsx";
import {IconType} from "react-icons";

interface Props {
	Icon: IconType;
	label: string;
	value?: string | number;
	color: "purple" | "rose" | "red" | "green";
	tooltip?: string;
	onClick?: () => void;
	isSelected?: boolean;
	isLoading?: boolean;
	className?: string;
}

export default function IconCard({Icon, label, value, color, tooltip, onClick, className, isLoading, isSelected}: Props) {
	const colorClasses: {[key in typeof color]: string} = {
		purple: "mti-purple-light",
		red: "mti-red-light",
		rose: "mti-rose-light",
		green: "mti-green-light",
	};

	return (
		<div
			onClick={onClick}
			className={clsx(
				"bg-white rounded-xl shadow p-4 flex flex-col gap-4 items-center text-center w-52 h-52 justify-center cursor-pointer hover:shadow-xl transition ease-in-out duration-300",
				tooltip && "tooltip tooltip-bottom",
				isSelected && `border border-solid border-${colorClasses[color]}`,
				className,
			)}
			data-tip={tooltip}>
			<Icon className={clsx("text-6xl", `text-${colorClasses[color]}`)} />
			<span className="flex flex-col gap-1 items-center text-xl">
				<span className="text-lg">{label}</span>
				<span className={clsx("font-semibold", `text-${colorClasses[color]}`, isLoading && "animate-pulse")}>
					{isLoading ? "..." : value}
				</span>
			</span>
		</div>
	);
}