import { ChangeEvent } from "react";

interface Props{
  text: string,
  size: "lg" | "md" | "sm",
  onClick: (target: ChangeEvent<any>) => any;
  additionalClassName?: string;
  bgColor?: string,
  color?: string,
  rounded?: boolean,
  enableBacgkround?: boolean;
  isSubmitButton?: boolean;
}

export const Button = (props: Props) => {

  const renderButtonClassName = () => {

    let buttonClass = "";
    switch(props.size){
      case "lg":
        buttonClass = buttonClass + " px-10 py-4 text-lg ";
        break;
      case "md":
        buttonClass = buttonClass + " px-8 py-3 text-md ";
        break;
      case "sm":
        buttonClass = buttonClass + " px-4 py-2 text-sm ";
        break;
    }

    buttonClass = buttonClass + (props.bgColor ?? "bg-primary-400") + " ";

    buttonClass = buttonClass + (props.color ?? "text-white") + " ";

    buttonClass = buttonClass + (props.rounded ? "rounded-md " : "");

    buttonClass = buttonClass + props.additionalClassName;

    return buttonClass;

  }

  return (
    <button
    type={props.isSubmitButton ? "submit" : "button"}
    className={renderButtonClassName()}
    onClick={props.onClick}
    >{props.text}</button>
  )
}