'use client'

import { Button } from "@/components/ui/button"
import { formatPrice } from "@/lib/format"
import axios from "axios";
import { useState } from "react";
import toast from "react-hot-toast";

interface CoursePurchaseButtonProps {
    price: number;
    courseId: string;
}
export const CoursePurchaseButton = ({
    price,
    courseId
}: CoursePurchaseButtonProps) => {

    const [isLoading, setIsLoading] = useState(false);
    const onClick = async () => {
        try {
            setIsLoading(true);
            const response = await axios.post(`/api/courses/${courseId}/checkout`);
            window.location.assign(response.data.url);
        } catch (error) {

            toast.error("An error occurred. Please try again.")

        } finally {

            setIsLoading(false);
        }
    }
   
    return (
          
        <Button onClick={onClick} className="p-[2px] font-semibold rounded-lg bg-gradient-to-r from-indigo-500 to-purple-500">
            <div className="flex items-center px-5 lg:px-7 h-12 bg-zinc-800 rounded-md transition duration-300 text-white hover:bg-transparent text-base lg:text-lg">
                Purchase course for {formatPrice(price)}
            </div>
        </Button>
    )
}