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;
  className?: string;
}

export default function IconCard({
  Icon,
  label,
  value,
  color,
  tooltip,
  onClick,
  className,
  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]}`)}>
          {value}
        </span>
      </span>
    </div>
  );
}