// routes/_layout.tsx
import { PageProps } from "$fresh/server.ts";
import { Head } from "$fresh/runtime.ts";

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>Fresh App</title>
      </Head>
      <body class="flex flex-col min-h-screen">
        <main class="flex-grow flex flex-col gap-2 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">
            <li>
              <a href="/" class={currentPath === "/" ? "menu-active" : ""}>
                <div class="tooltip" data-tip="Home">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="h-5 w-5"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                  >
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
                    />
                  </svg>
                </div>
              </a>
            </li>
            <li>
              <a
                href="/posts"
                class={currentPath.startsWith("/posts") ? "menu-active" : ""}
              >
                <div class="tooltip" data-tip="Posts">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="h-5 w-5"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                  >
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v12a2 2 0 002 2zm0 0l1.406 1.406A2 2 0 0122 22a2 2 0 01-2-2v0zm-9.5-8h4m-2 2v-4"
                    />
                  </svg>
                </div>
              </a>
            </li>
            <li>
              <a
                href="/projects"
                class={currentPath.startsWith("/projects") ? "menu-active" : ""}
              >
                <div class="tooltip" data-tip="Projects">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="h-5 w-5"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                  >
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.206.129.4.259.598.37"
                    />
                  </svg>
                </div>
              </a>
            </li>
          </ul>
        </div>
      </body>
    </>
  );
}
