import React from "react";

interface ButtonProps {
    text: string | React.ReactNode;
    onClick?: () => void;
    theme?: 'primary' | 'secondary';
    key?: number;
    disabled?: boolean;
    type?: "button" | "submit";
}

const Button = ({ text, onClick, theme = 'primary', key, disabled = false, type = "button" }: ButtonProps) => {

    const themeClasses = theme === 'primary'
        ? 'text-light-600 bg-primary-500 hover:bg-light-600 hover:text-primary-500'
        : 'text-primary-500 bg-light-600 hover:bg-primary-500 hover:text-light-600';

    const buttonDisabledClasses = disabled
        ? '!bg-gray-200 !text-light-600 !border-gray-200 cursor-not-allowed'
        : 'cursor-pointer';

    return (
        <button
            key={key}
            type={type}
            className={`w-full capitalize text-base font-medium border-2 border-primary-500 py-3 px-4 rounded-2xl ${buttonDisabledClasses} transition-colors ${themeClasses}`}
            onClick={onClick}
            disabled={disabled}
        >
            {text}
        </button>
    )
}

export default Button