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

const MainComponent = () => {
    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">
            <div className='mt-5'>
                <div className=''>
                    <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 '>
                            <div className='card p-3 shadow-2 radius-8 h-100 border border-white'>
                                <div className='card-body text-center p-0'>
                                    <div className='d-flex flex-wrap align-items-center justify-content-center gap-1 mb-8'>
                                        <span className='mb-0 w-200-px h-200-px'>
                                            <img
                                                src='/assets/images/home/icons/walk-in.webp'
                                                alt=''
                                                className="mx-auto d-block "
                                            />
                                        </span>
                                    </div>
                                    <h6 className='fw-semibold mt-3'>Walk In</h6>
                                </div>
                            </div>
                        </div>
                        <div className='col-xxl-3 col-lg-4 col-sm-6 '>
                            <div className='card p-3 shadow-2 radius-8 h-100 border border-white'>
                                <div className='card-body text-center p-0'>
                                    <div className='d-flex flex-wrap align-items-center justify-content-center gap-1 mb-8'>
                                        <span className='mb-0 w-200-px h-200-px'>
                                            <img
                                                src='/assets/images/home/icons/pick-up.webp'
                                                alt=''
                                                className="mx-auto d-block"
                                            />
                                        </span>
                                    </div>
                                    <h6 className='fw-semibold mt-3'>Pick Up</h6>
                                </div>
                            </div>
                        </div>
                        <div className='col-xxl-3 col-lg-4 col-sm-6'>
                            <div className='card p-3 shadow-2 radius-8 h-100 border border-white'>
                                <div className='card-body text-center p-0'>
                                    <div className='d-flex flex-wrap align-items-center justify-content-center gap-1 mb-8'>
                                        <span className='mb-0 w-200-px h-200-px '>
                                            <img
                                                src='/assets/images/home/icons/delivery.webp'
                                                alt=''
                                                className="mx-auto d-block"
                                            />
                                        </span>
                                    </div>
                                    <h6 className='fw-semibold mt-3'>Delivery</h6>
                                </div>
                            </div>
                        </div>
                        <div className='col-xxl-3 col-lg-4 col-sm-6'>
                            <div className='card p-3 shadow-2 radius-8 h-100 border border-white'>
                                <Link href={`/waiter/table-order`} className="cursor-pointer" >
                                    <div className='card-body text-center p-0'>
                                        <div className='d-flex flex-wrap align-items-center justify-content-center gap-1 mb-8'>
                                            <span className='mb-0 w-200-px h-200-px '>
                                                <img
                                                    src='/assets/images/home/icons/dine-in.webp'
                                                    alt=''
                                                    className="mx-auto d-block"
                                                />
                                            </span>
                                        </div>
                                        <h6 className='fw-semibold mt-3'>Dine In</h6>
                                    </div>
                                </Link>
                            </div>
                        </div>
                        <div className='col-xxl-3 col-lg-4 col-sm-6'>
                            <div className='card p-3 shadow-2 radius-8 h-100 border border-white'>
                                <div className='card-body text-center p-0'>
                                    <div className='d-flex flex-wrap align-items-center justify-content-center gap-1 mb-8'>
                                        <span className='mb-0 w-200-px h-00-px '>
                                            <img
                                                src='/assets/images/home/icons/drive-thru.webp'
                                                alt=''
                                                className="mx-auto d-block"
                                            />
                                        </span>
                                    </div>
                                    <h6 className='fw-semibold mt-3'>Drive Thru</h6>
                                </div>
                            </div>
                        </div>
                        <div className='col-xxl-3 col-lg-4 col-sm-6'>
                            <div className='card p-3 shadow-2 radius-8 h-100 border border-white'>
                                <div className='card-body text-center p-0'>
                                    <div className='d-flex flex-wrap align-items-center justify-content-center gap-1 mb-8'>
                                        <span className='mb-0 w-200-px h-200-px'>
                                            <img
                                                src='/assets/images/home/icons/kiosk.webp'
                                                alt=''
                                                className="mx-auto d-block"
                                            />
                                        </span>
                                    </div>
                                    <h6 className='fw-semibold mt-3'>Kiosk</h6>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default MainComponent;
