import { ReactNode } from "react";

interface IconButtonProps {
  children: ReactNode;
  title: string;
  variant?: "default" | "approve" | "reject";
  onClick?: () => void;
}

const VARIANT_HOVER: Record<string, string> = {
  default: "hover:border-forest hover:text-forest",
  approve: "hover:border-forest hover:text-forest hover:bg-[#E8F2EC]",
  reject: "hover:border-clay hover:text-clay hover:bg-[#F5EAE6]",
};

export default function IconButton({ children, title, variant = "default", onClick }: IconButtonProps) {
  return (
    <button
      title={title}
      aria-label={title}
      onClick={onClick}
      className={`w-8 h-8 rounded-full border border-mist bg-white text-ink-soft flex items-center justify-center transition-colors ${VARIANT_HOVER[variant]}`}
    >
      <span className="w-4 h-4">{children}</span>
    </button>
  );
}