import type { HTMLAttributes } from "react";
import {
  TankComponentButton,
  type TankComponentButtonProps,
} from "./TankComponentButton";

interface GenericTankComponentButtonProps extends TankComponentButtonProps {
  icon: string;
  iconStyles?: HTMLAttributes<HTMLImageElement>["style"];
}

export function GenericTankComponentButton({
  icon,
  iconStyles,
  children,
  ...props
}: GenericTankComponentButtonProps) {
  return (
    <TankComponentButton {...props}>
      <div
        style={{
          width: 48,
          height: 40,
          position: "relative",
        }}
      >
        <img
          alt={icon}
          draggable={false}
          src={icon}
          style={{
            objectFit: "contain",
            width: 32,
            height: 32,
            position: "absolute",
            opacity: props.disabled ? 0.5 : 1,
            transform: "translate(-50%, -50%) scale(0.75)",
            top: "50%",
            left: "50%",
            ...iconStyles,
          }}
        />
      </div>
      {children}
    </TankComponentButton>
  );
}