"use client";

import clsx from "clsx";
import { LoadingSpinner } from "@components/common/LoadingSpinner";
export default function FooterBtnInAddToCartModal({
    isAvailable,
    isLoading,
    onBuyNow,
    onAddToCart
}: {
    isAvailable: boolean; 
    isLoading: boolean;
    onBuyNow: () => void,
    onAddToCart: () => void
}) {

    const btnClass = 'flex-none flex items-center justify-center w-40 h-11.5 rounded-4xl text-ly-16 font-bold text-white';
    return (
        <div className="flex justify-between">
            {isAvailable ? 
                (<>
                    <button className={clsx(btnClass,'bg-ly-deepgreen')}
                        onClick={onBuyNow}
                    >
                        Buy Now {isLoading && <LoadingSpinner className="ml-2" />}
                        
                    </button>
                    <button className={clsx(btnClass, 'bg-ly-middlegreen')}
                        onClick={onAddToCart}
                    >
                        Add to Cart {isLoading && <LoadingSpinner className="ml-2" />}
                    </button>
                </>)
            :
                <p className="text-center text-ly-14">The selected options are not available!</p>
            }
            
        </div>
    );
}