"use client";

import clsx from "clsx";

export function ProductAddToCart({
    isAvailable,
    isLoading,
    onAddToCart,
    onBuyNow
}: { 
    isAvailable: boolean; 
    isLoading: boolean;
    onAddToCart: () => void;
    onBuyNow: () => 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="fixed w-full bottom-0 left-0 bg-white box-border pt-3 pl-3 pr-3 pb-5 border-t border-solid border-ly-middlegray z-1000">
            {isAvailable ? (
                <div className="flex justify-between">
                    <button onClick={onBuyNow} type="button" className={clsx(btnClass,'bg-ly-deepgreen', { 'opacity-25':isLoading})}>Buy Now</button>
                    <button onClick={onAddToCart} type="button" className={clsx(btnClass,'bg-ly-middlegreen', { 'opacity-25':isLoading})}>Add To Cart</button>
                </div>
            ): (
                <p>The selected options are not available!</p>
            )}
            
        </div>
    );
}