import { ReactNode, ButtonHTMLAttributes } from "react";
import type { OverridableComponent } from "@mui/material/OverridableComponent";
import type { SvgIconTypeMap } from "@mui/material/SvgIcon";
import Button from "./Button";


type IconButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
  variant?: "primary" | "secondary";
  href?: string;
  className?: string;
  children?: ReactNode;
  shape?: "default" | "round";
  onClick?: () => void;
  icon: OverridableComponent<SvgIconTypeMap<object, "svg">> & { muiName: string; }
  color?: string;
};

export default function IconButton({
  variant,
  href,
  className,
  shape,
  onClick,
  icon,
  color,
}: IconButtonProps) {
  const Icon = icon;
  const iconStyle = color ? { color } : undefined;
  return (
    <Button
      variant={variant}
      href={href}
      className={className}
      shape={shape}
      onClick={onClick}
    >
      <Icon className="icon-button__icon" style={iconStyle} />
    </Button>
  );
}