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?: () => void;
}

const Button = ({
  className,
  icon,
  text,
  buttonType = "primary",
  onClick,
}: ButtonProps) => {
  const backgroundColor = backgroundColors[buttonType];
  const textColor = textColors[buttonType];
  const border = borders[buttonType];
  const padding = paddings[buttonType];

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

export default Button;