import React, {useEffect, useState} from "react";
import {
    HomeIcon,
    EnvelopeIcon,
    UserIcon,
    BuildingStorefrontIcon,
    BriefcaseIcon,
} from "@heroicons/react/24/outline"

const GridLayout = ({ children }) => {

    const [selectedPage, setSelectedPage] = useState(() => {
        const storedPage = localStorage.getItem('selectedPage');
        return storedPage ? storedPage : 'home';
    });

    useEffect(() => {
        localStorage.setItem('selectedPage', selectedPage);
    }, [selectedPage]);

    const handlePageClick = (page) => {
        setSelectedPage(page);
    };


    return (
        <div className="container px-8 mx-auto grid md:grid-cols-[96px,1fr] lg:grid-cols-[96px,1fr,96px] gap-10">

            {/*Left column - sticky */}
            <div className="max-md:hidden self-start sticky top-0 col-span-1 pt-8 text-trueGray-500 ">
            <nav className="">
                <a
                    href="/"
                    className={`flex items-center flex-col mb-4 hover:text-indigo-500 focus:text-indigo-500 p-1 rounded ${
                        selectedPage === 'home' ? 'bg-indigo-50 text-indigo-500' : ''
                    }`}
                    onClick={() => handlePageClick('home')}
                >
               <HomeIcon className="w-8 h-8" />
                <button
                    rel="noopener"
                    className="mb-1 text-xs font-light">
                    Home
                </button>
            </a>
                <a
                    href="/profile"
                    className={`flex items-center flex-col mb-4 hover:text-indigo-500 focus:text-indigo-500 p-1 rounded ${
                        selectedPage === 'profile' ? 'bg-indigo-50 text-indigo-500' : ''
                    }`}
                    onClick={() => handlePageClick('profile')}
                >
                <UserIcon className="w-8 h-8" />
                <button
                    rel="noopener"
                    className="mb-1 text-xs font-light">
                    Profile
                </button>
            </a>
                <a
                    href="/find-opportunities"
                    className={`flex items-center flex-col mb-4 hover:text-indigo-500 focus:text-indigo-500 p-1 rounded ${
                        selectedPage === 'find-opportunities' ? 'bg-indigo-50 text-indigo-500' : ''
                    }`}
                    onClick={() => handlePageClick('find-opportunities')}
                >
                <BriefcaseIcon className="w-8 h-8" />
                <button
                    rel="noopener"
                    className="mb-1 text-xs font-light  whitespace-nowrap">
                    Find Opportunities
                </button>
            </a>
                <a
                    href="/recruit-volunteers"
                    className={`flex items-center flex-col mb-4 hover:text-indigo-500 focus:text-indigo-500 p-1 rounded ${
                        selectedPage === 'recruit-volunteers' ? 'bg-indigo-50 text-indigo-500' : ''
                    }`}
                    onClick={() => handlePageClick('recruit-volunteers')}
                >
                <BuildingStorefrontIcon className="w-8 h-8" />
                <button
                    rel="noopener"
                    className="mb-1 text-xs font-light whitespace-nowrap">
                     Recruit Volunteers
                </button>
            </a>
                <a
                    href="/messages"
                    className={`flex items-center flex-col mb-4 hover:text-indigo-500 p-1 rounded ${
                        selectedPage === 'messages' ? 'bg-indigo-50 text-indigo-500' : ''
                    }`}
                    onClick={() => handlePageClick('messages')}
                >                <EnvelopeIcon className="w-8 h-8 " />
                <button
                    rel="noopener"
                    className="mb-1 text-xs font-light">
                    Messages
                </button>
            </a>
            </nav>
            </div>

            {/*Middle column */}
            <div className="overflow-auto h-screen">
                {children}
            </div>

            {/*Right column  */}
            <div></div>
        </div>
    );
}

export default GridLayout;