import React from "react";

// Light background mapping for Bootstrap theme colors
const lightBackgrounds = {
  primary: "#e3f2fd",
  secondary: "#E9EEF4",
  success: "#e6f4ea",
  danger: "#fdecea",
  warning: "#fff3cd",
  info: "#e0f7fa",
  dark: "#e9ecef",
};

const IconButton = ({
  iconClass,       // icon class string like 'bx bx-user'
  color = "primary",
  onClick,
  size = 20,
  radius=null,
  style = {},
  ...rest
}) => {
  const backgroundColor = lightBackgrounds[color] || "#f8f9fa";
  const iconColor = `var(--bs-${color})`;

  return (
    <button
      type="button"
      onClick={onClick}
      className={`border-0 ${radius ? `rounded-${rounded}` : 'rounded'} d-flex align-items-center justify-content-center`}
      style={{
        backgroundColor,
        color: iconColor,
          padding: "0.4rem",
        margin:'0rem 0.2rem',
        ...style,
      }}
      {...rest}
    >
      <i className={iconClass} style={{ fontSize: size, color: iconColor }}></i>
    </button>
  );
};

export default IconButton;