// routes/_layout.tsx
import { PageProps } from "$fresh/server.ts";
import { Head } from "$fresh/runtime.ts";
import { LuCodeXml, LuHouse, LuNotebookPen } from "@preact-icons/lu";

export default function Layout({ Component, url }: PageProps) {
  const currentPath = url.pathname;

  return (
    <>
      <Head>
        <meta charset="utf-8" />
        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
        <meta name="viewport" content="width=device-width" />
        <title>Atridad Lahiji</title>
      </Head>
      <body class="flex flex-col min-h-screen">
        <main class="flex-grow flex flex-col gap-4 items-center justify-center">
          <Component />
        </main>

        <div class="fixed bottom-4 left-1/2 transform -translate-x-1/2 z-20">
          <ul class="menu menu-horizontal bg-base-200 rounded-box p-2 shadow-lg gap-2">
            <li>
              <a href="/" class={currentPath === "/" ? "menu-active" : ""}>
                <div class="tooltip" data-tip="Home">
                  <LuHouse class="text-xl" />
                </div>
              </a>
            </li>
            <li>
              <a
                href="/posts"
                class={currentPath.startsWith("/posts") ? "menu-active" : ""}
              >
                <div class="tooltip" data-tip="Posts">
                  <LuNotebookPen class="text-xl" />
                </div>
              </a>
            </li>
            <li>
              <a
                href="/projects"
                class={currentPath.startsWith("/projects") ? "menu-active" : ""}
              >
                <div class="tooltip" data-tip="Projects">
                  <LuCodeXml class="text-xl" />
                </div>
              </a>
            </li>
          </ul>
        </div>
      </body>
    </>
  );
}
