"use client";

import { usePathname } from "next/navigation";
import Link from "next/link";
import { Activity, Brain, Clock } from "lucide-react";

const TABS = [
  { href: "/", label: "Pulse", icon: Activity },
  { href: "/memory", label: "Memory", icon: Brain },
  { href: "/history", label: "History", icon: Clock },
] as const;

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

  return (
    <nav
      className="fixed bottom-0 left-0 right-0 z-50"
      style={{
        background: "rgba(17,17,19,0.95)",
        backdropFilter: "saturate(180%) blur(20px)",
        WebkitBackdropFilter: "saturate(180%) blur(20px)",
        borderTop: "1px solid var(--border)",
        paddingBottom: "var(--safe-bottom)",
      }}
    >
      <div className="flex justify-around items-center h-14 max-w-lg mx-auto">
        {TABS.map(({ href, label, icon: Icon }) => {
          const active =
            href === "/" ? pathname === "/" : pathname.startsWith(href);
          return (
            <Link
              key={href}
              href={href}
              className="flex flex-col items-center gap-0.5 px-6 py-1.5"
            >
              <Icon
                size={20}
                strokeWidth={active ? 2.2 : 1.5}
                style={{ color: active ? "var(--accent)" : "var(--text-3)" }}
              />
              <span
                className="text-[10px]"
                style={{
                  color: active ? "var(--accent)" : "var(--text-3)",
                  fontWeight: active ? 600 : 400,
                }}
              >
                {label}
              </span>
            </Link>
          );
        })}
      </div>
    </nav>
  );
}