import SvgIcon, { Icon } from "./SvgIcon"

type ButtonProps = {
    onClicked: () => void,
    icon?: Icon,
    text?: string,
    buttonType : ButtonType
}

export const ButtonType = {
  DarkButton: {
    textColor: "text-white",
    backgroundColor: "bg-gray-600  hover:bg-gray-800"
  },
  PrimaryButton: {
    textColor: "text-gray-600",
    backgroundColor: "bg-blue-300 hover:bg-blue-400"
  },
  DefaultButton: {
    textColor: "text-gray-600",
    backgroundColor: "bg-gray-300 hover:bg-gray-400"
  }
} as const;

export type ButtonType = typeof ButtonType[keyof typeof ButtonType];

export default function Button ({onClicked, icon, text, buttonType = ButtonType.DefaultButton} : ButtonProps){
    return(
        <button
            type="button"
            className={`px-4 py-2 shadow-md rounded-lg whitespace-nowrap ${buttonType.backgroundColor} ${buttonType.textColor}`}
            onClick={onClicked}
        >
            <div className="flex items-center gap-2">
                {/* Render icon only if defined */}
                {icon && <SvgIcon icon={icon} color={buttonType.textColor} />}
                {text}
            </div>
        </button>
    )
}