import {
  backgroundColors,
  textColors,
  borders,
  paddings,
} from "../consts/buttonStyles";
import { ButtonType } from "../types/button";

interface ButtonProps {
  buttonType?: ButtonType;
  icon?: React.ReactNode;
  text?: string;
  className?: string;
  onClick?: (
    event: React.MouseEvent<HTMLButtonElement, MouseEvent>
  ) => void | (() => void);
  disabled?: boolean;
  isCircleRounded?: boolean;
  type?: "button" | "submit" | "reset";
  iconPos?: "right" | "left";
}

const Button = ({
  className,
  icon,
  text,
  buttonType = "primary",
  disabled = false,
  onClick,
  type = "button",
  iconPos = "left",
  isCircleRounded = false,
}: ButtonProps) => {
  const backgroundColor = backgroundColors[buttonType];
  const textColor = textColors[buttonType];
  const border = borders[buttonType];
  const padding = paddings[buttonType];
  const rounded = isCircleRounded ? "rounded-full" : "rounded-lg";
  const disabledStyle = disabled ? "bg-[#0D192214] text-gray-400" : "";

  return (
    <button
      type={type}
      disabled={disabled}
      onClick={onClick}
      className={`min-w-10 max-h-10 ${rounded}  ${
        icon && !text ? "p-[10px]" : padding
      }  transition-all duration-300 ease-in-out text-s pointer-events-auto flex gap-1 items-center  align-middle h-fit ${backgroundColor} ${textColor} ${border} ${disabledStyle} ${
        className ? className : ""
      }`}
    >
      {/* {icon && <div>{icon}</div>} */}
      {icon && iconPos === "left" && <div>{icon}</div>}
      {text && <div>{text}</div>}
      {icon && iconPos === "right" && <div>{icon}</div>}
    </button>
  );
};

export default Button;