import React from "react";

interface OptionButtonProps {
    children: React.ReactNode;
    selected?: boolean;
    onClick?: () => void;
    disabled?: boolean;
    type?: "button" | "submit";
    className?: string;
}

const OptionButton = ({
    children,
    selected = false,
    onClick,
    disabled = false,
    type = "button",
    className = "",
}: OptionButtonProps) => {
    const baseClasses =
        "w-full px-4 py-3 border gap-2 rounded-full text-sm font-medium capitalize transition-all duration-200 cursor-pointer";

    const selectedClasses =
        "bg-[#DAF8CF] text-[#45CF27] border-[#45CF27]";

    const unselectedClasses =
        "bg-[#F2F2F2] text-black border-gray-400 hover:bg-[#DAF8CF] hover:text-[#45CF27] hover:border-[#45CF27]";

    const disabledClasses =
        "bg-[#E0E0E0] text-gray-400 border-gray-300 cursor-not-allowed";

    return (
        <button
            type={type}
            onClick={onClick}
            disabled={disabled}
            className={`${baseClasses} ${disabled
                    ? disabledClasses
                    : selected
                        ? selectedClasses
                        : unselectedClasses
                } ${className}`}
        >
            {children}
        </button>
    );
};

export default OptionButton;