import customerMenu from "@/constants/CustomerMenu";
import { Link, router, usePage } from "@inertiajs/react";
import { ArrowLeft, Lock, LogOut, Menu, User, X } from "lucide-react";
import React, { useState } from "react";
import { MdTour } from "react-icons/md";

export default function CustomerNav() {
    const [showMobileMenu, setShowMobileMenu] = useState(false);
    const { contactSetting, current_route } = usePage().props;
    return (
        <>
            <div
                className={`bg-white w-full md:w-75 h-auto pb-5 md:pb-0 md:h-full rounded-box border-t border-slate-200 pt-4 flex flex-col justify-between fixed md:static bottom-0 left-0 z-90 md:z-auto shadow-sm md:shadow-none duration-200 transition-all ${showMobileMenu ? "translate-y-0 pointer-events-auto opacity-100" : "translate-y-20 pointer-events-none opacity-0"} md:translate-y-0 md:pointer-events-auto md:opacity-100`}
            >
                <div>
                    <div className="flex items-center justify-between mb-3 px-5 border-b md:border-b-0 border-dashed border-slate-400 pb-2 md:pb-0">
                        <Link
                            href={route("home")}
                            className="flex items-center text-sm font-bold capitalize gap-3 py-3 duration-200 text-neutral hover:text-primary"
                        >
                            <ArrowLeft size={16} />
                            <span>Home</span>
                        </Link>
                        <button
                            onClick={() => setShowMobileMenu(false)}
                            className="btn btn-sm btn-circle btn-error btn-soft md:hidden"
                        >
                            <X size={12} />
                        </button>
                    </div>
                    {customerMenu?.map((val, i) => (
                        <Link
                            key={i}
                            href={route(val?.link)}
                            className={`flex items-center text-sm font-medium capitalize gap-3 py-3 px-5 duration-200 text-neutral hover:bg-slate-100 ${val?.link == current_route ? "bg-slate-200" : ""}`}
                        >
                            <val.icon size={16} />
                            <span>{val?.label}</span>
                        </Link>
                    ))}
                    <button
                        onClick={() => {
                            if (confirm("Are you sure you want to logout?")) {
                                router.get(route("logout"));
                            }
                        }}
                        className="flex w-full items-center text-sm font-medium capitalize gap-3 py-3 px-5.5 duration-200 text-neutral hover:bg-error/10"
                    >
                        <LogOut size={16} />
                        <span>Logout</span>
                    </button>
                </div>

                <div className="bg-slate-100 rounded-box p-5 m-2 mt-10 hidden md:block">
                    <h1 className="text-sm font-bold capitalize text-neutral">
                        Need Assistance?
                    </h1>
                    <p className="text-sm text-neutral/70 mb-3 mt-4">
                        Feel free to reach out to our support team if you have
                        any questions.
                    </p>
                    <p className="text-sm text-neutral/70 mb-3 mt-2">
                        {contactSetting?.phone}
                    </p>
                </div>
            </div>

            {!showMobileMenu && (
                <button
                    data-tip="Menu"
                    onClick={() => setShowMobileMenu(true)}
                    className="btn md:hidden btn-secondary tooltip btn-circle shadow-2xl fixed bottom-10 left-1/2 -translate-x-1/2"
                >
                    <Menu size={20} />
                </button>
            )}
        </>
    );
}