---
import { Birdhouse, TentTree, Trees } from "@lucide/astro";

const pathname = Astro.url.pathname;

const links = [
  { name: "Home", href: "/", icon: Birdhouse },
  { name: "Work", href: "/work", icon: TentTree },
  { name: "Blog", href: "/blog", icon: Trees },
];

const { className } = Astro.props;
---

<div class={className}>
  <div class="surface">
    <nav>
      <ul>
        {
          links.map((link) => (
            <li
              class:list={[
                pathname === link.href && "bg-bg-dim",
                "rounded-md p-2",
              ]}
            >
              <a
                class:list={[
                  "text-green flex gap-2 items-center",
                  pathname === link.href
                    ? "hover:cursor-default"
                    : "fancy-link",
                ]}
                href={link.href}
              >
                <link.icon class="size-4" />
                {link.name}
              </a>
            </li>
          ))
        }
      </ul>
    </nav>
  </div>
</div>