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

const GridLayout = ({ children }) => {
    return (
        <div className="container px-8 mx-auto grid grid-cols-[96px,1fr,96px] gap-10">

            {/*Left column - sticky */}
            <div className="self-start sticky top-0 col-span-1 pt-8 ">
            <nav className="p-2 ">
            <a  href="/" className="flex items-center flex-col mb-4 text-trueGray-500 hover:text-indigo-500 focus:text-indigo-500 focus:bg-indigo-100">
               <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 text-trueGray-500 hover:text-indigo-500 focus:text-indigo-500 focus:bg-indigo-100">
                <UserIcon className="w-8 h-8" />
                <button
                    rel="noopener"
                    className="mb-1 text-xs font-light">
                    Profile
                </button>
            </a>
            <a  href="/volunteer" className="flex items-center flex-col mb-4 text-trueGray-500 hover:text-indigo-500 focus:text-indigo-500 focus:bg-indigo-100">
                <BriefcaseIcon className="w-8 h-8" />
                <button
                    rel="noopener"
                    className="mb-1 text-xs font-light whitespace-nowrap">
                    Find Opportunities
                </button>
            </a>
            <a  href="/volunteer" className="flex items-center flex-col mb-4 text-trueGray-500 hover:text-indigo-500 focus:text-indigo-500 focus:bg-indigo-100">
                <BuildingStorefrontIcon className="w-8 h-8" />
                <button
                    rel="noopener"
                    className="mb-1 text-xs font-light whitespace-nowrap">
                     Recruit Volunteers
                </button>
            </a>
            <a  href="/" className="flex items-center flex-col mb-4 text-trueGray-500 hover:text-indigo-500 focus:text-indigo-500 focus:bg-indigo-100">
                <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 bg-blue-300 h-screen">01
            <div>01 asdfasdf</div>
            </div>

            {/*Right column  */}
            <div className="bg-green-300">01</div>
            {children}
        </div>
    );
}

export default GridLayout;