import {
  backgroundColors,
  backgroundHoverColors,
  textColors,
} from "../consts/buttonColors";
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 backgroundHoverColor = backgroundHoverColors[buttonType];
  const textColor = textColors[buttonType];

  return (
    <button
      onClick={onClick}
      className={`min-w-[40px] ${
        icon && !text ? "p-[10px]" : "py-3 px-6"
      }  transition-[background] duration-300 ease-in-out rounded-lg text-s ${backgroundColor} ${backgroundHoverColor} ${textColor} ${
        className ? className : ""
      }`}
    >
      {icon && <div>{icon}</div>}
      {text && <p>{text}</p>}
    </button>
  );
};

export default Button;