'use client'
import Link from "next/link";
import React, { useEffect, useState } from "react";
import { useRouter } from "next/navigation";

const AdminDashBoardMain = () => {
    const router = useRouter()
    // const params = useParams();
    // const restaurantbranch = params?.restaurantbranch;
    // const RestaruntBranch = restaurantbranch

    const [restaruntBranch, setRestaruntBranch] = useState("")

    useEffect(() => {
        const restarunt = localStorage.getItem("restaurantbranch")
        setRestaruntBranch(restarunt)
    }, [])

    useEffect(() => {
        const isLogin = JSON.parse(localStorage.getItem("isLogin"));
        if (!isLogin) {
            router.push(`/admin?restaurantbranch=${restaruntBranch}`);
        }
    }, [router]);

    return (
        <div className="container" style={{ marginBottom: "100px" }}>
            <div className=' h-100 p-0 radius-12'>
                <div className=' p-3 p-lg-5 p-lg-40'>
                    <div className='row gy-3 gx-3 gx-lg-5 gy-lg-5 justify-content-center'>
                        <div className="col-xxl-3 col-lg-4 col-sm-6 cursor-pointer">
                            <div className={`card p-3 shadow-2 radius-8 h-100  border border-white`}>
                                <div className="card-body text-center p-0">
                                    <Link
                                        href={`/admin/day-reservation-table?restaurantbranch=${restaruntBranch}`}
                                    >
                                        <div style={{ width: "200px", height: "200px" }}>
                                            <img src="/assets/images/day.webp" alt="reservation icon" />
                                        </div>

                                        <h6 className="mb-0 text-theme mt-3">Day Reservation</h6>
                                    </Link>
                                </div>
                            </div>
                        </div>
                        <div className="col-xxl-3 col-lg-4 col-sm-6 cursor-pointer">
                            <div className={`card p-3 shadow-2 radius-8 h-100 border border-white`}>
                                <div className="card-body text-center p-0">
                                    <Link
                                        href={`/admin/date-reservation-table?restaurantbranch=${restaruntBranch}`}
                                    >
                                        <div style={{ width: "200px", height: "200px" }}>
                                            <img src="/assets/images/date.webp" alt="reservation icon" />
                                        </div>

                                        <h6 className="mb-0 text-theme mt-3">Date Reservation</h6>
                                    </Link>
                                </div>
                            </div>
                        </div>
                        <div className="col-xxl-3 col-lg-4 col-sm-6 cursor-pointer">
                            <div className={`card p-3 shadow-2 radius-8 h-100  border border-white`}>
                                <div className="card-body text-center p-0">
                                    <Link
                                        href={`/admin/reserved-users?restaurantbranch=${restaruntBranch}`}
                                    >
                                        <div style={{ width: "200px", height: "200px" }}>
                                            <img src="/assets/images/reserved.webp" alt="reservation icon" />
                                        </div>

                                        <h6 className="mb-0 text-theme mt-3">Reserved by User</h6>
                                    </Link>
                                </div>
                            </div>
                        </div>
                        <div className="col-xxl-3 col-lg-4 col-sm-6 cursor-pointer">
                            <div className={`card p-3 shadow-2 radius-8 h-100  border border-white`}>
                                <div className="card-body text-center p-0">
                                    <Link
                                        href={`/admin/floor-plan?restaurantbranch=${restaruntBranch}`}
                                    >
                                        <div style={{ width: "200px", height: "200px" }}>
                                            <img src="/assets/images/plan.webp" alt="reservation icon" />
                                        </div>

                                        <h6 className="mb-0 text-theme mt-3">Floor Plan Update</h6>
                                    </Link>
                                </div>
                            </div>
                        </div>
                        <div className="col-xxl-3 col-lg-4 col-sm-6 cursor-pointer">
                            <div className={`card p-3 shadow-2 radius-8 h-100  border border-white`}>
                                <div className="card-body text-center p-0">
                                    <Link
                                        href={`/admin/pos/dashboard`}
                                    >
                                        <div style={{ width: "200px", height: "200px" }}>
                                            <img src="/assets/images/plan.webp" alt="reservation icon" />
                                        </div>

                                        <h6 className="mb-0 text-theme mt-3">POS System</h6>
                                    </Link>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default AdminDashBoardMain;