"use client";

import {
  CalendarDaysIcon,
  BellAlertIcon,
  BoltIcon,
  ChartBarIcon,
  Cog6ToothIcon,
  FireIcon,
  SparklesIcon,
  Squares2X2Icon,
} from "@heroicons/react/24/outline";
import Link from "next/link";
import { usePathname } from "next/navigation";

const items = [
  { href: "/", label: "Tag", icon: CalendarDaysIcon },
  { href: "/planung", label: "Plan", icon: SparklesIcon },
  { href: "/statistiken", label: "Stats", icon: ChartBarIcon },
  { href: "/hellfireclub", label: "Club", icon: FireIcon },
];

export function MobileNav() {
  const pathname = usePathname();

  return (
    <>
      <div className="sticky top-0 z-30 flex items-center justify-between border-b border-gray-200 bg-white/95 px-4 py-3 backdrop-blur dark:border-neutral-800 dark:bg-neutral-900/95 lg:hidden">
        <div className="flex items-center gap-2">
          <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-[#0F766E] text-xs font-bold text-white">
            HH
          </div>
          <div>
            <p className="text-sm font-semibold leading-none text-gray-900 dark:text-neutral-100">Hellth Hub</p>
            <p className="mt-0.5 text-xs text-gray-400">Daily Health</p>
          </div>
        </div>
      </div>

      <nav className="fixed inset-x-0 bottom-0 z-40 grid grid-cols-4 border-t border-gray-200 bg-white/95 px-2 pb-[env(safe-area-inset-bottom)] pt-1 backdrop-blur dark:border-neutral-800 dark:bg-neutral-900/95 lg:hidden">
        {items.map((item) => {
          const active = item.href === "/" ? pathname === "/" : pathname.startsWith(item.href);
          return (
            <Link
              key={`${item.href}-${item.label}`}
              href={item.href}
              className={`flex min-h-14 flex-col items-center justify-center gap-0.5 rounded-md text-xs font-medium ${
                active ? "text-[#0F766E]" : "text-gray-500 dark:text-neutral-400"
              }`}
            >
              <item.icon className="h-5 w-5" />
              <span>{item.label}</span>
            </Link>
          );
        })}
      </nav>
    </>
  );
}