import React from "react";
import { cn } from "@/lib/utils";
import {
    getPhoneNumber,
    getContactLink,
    TRANSITION_ALL,
} from "@/lib/constants";
import { PhoneCall } from "lucide-react";
import Title from "./atoms/title";

interface CallNowDialogProps {
    page?: string;
}

function CallNowDialog({ page }: CallNowDialogProps) {
    const [open, setOpen] = React.useState(false);
    const phoneNumber = getPhoneNumber(page);
    const contactLink = getContactLink(page);

    React.useEffect(() => {
        setOpen(true);
    }, []);

    return open ? (
        <div
            className={cn(
                TRANSITION_ALL,
                open ? "fixed top-0 z-10000 h-screen w-screen" : "hidden",
                "grid place-items-center bg-lime-800/80",
            )}
            onClick={() => setOpen(false)}
        >
            <div className="flex flex-col items-center justify-center gap-8">
                <Title title="Call Now" size="h2" color="white" />

                <a
                    className={cn(
                        "flex items-center gap-4 rounded-full bg-lime-700 px-8 py-6 text-lime-50",
                    )}
                    href={contactLink}
                >
                    <PhoneCall className="h-8 w-auto" />
                    <p className="text-xl font-semibold">{phoneNumber}</p>
                </a>
            </div>
        </div>
    ) : (
        <></>
    );
}

export default CallNowDialog;
