"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";

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

  const isPackages = pathname.startsWith("/packages");
  const isDashboard = pathname.startsWith("/dashboard") || pathname.startsWith("/deposit") || pathname.startsWith("/transactions");
  const isProfile = pathname.startsWith("/profile");
  const isHome = !isPackages && !isDashboard && !isProfile;

  return (
    <div className="md:hidden fixed bottom-6 left-0 right-0 z-50 flex justify-around items-center px-4 py-2">
      <div className="bg-glass-bg backdrop-blur-xl border border-white/20 w-full max-w-md rounded-full flex justify-around items-center px-4 py-3 shadow-[0_32px_64px_-12px_rgba(1,7,95,0.1)]">
        <Link
          href="/"
          className={`flex flex-col items-center justify-center p-3 transition-colors ${
            isHome
              ? "text-secondary-fixed-dim bg-primary-container rounded-full ring-2 ring-gold-accent shadow-[0_0_15px_rgba(254,214,101,0.5)]"
              : "text-on-surface-variant hover:text-gold-accent"
          }`}
        >
          <span className="material-symbols-outlined" style={{ fontVariationSettings: isHome ? "'FILL' 1" : "'FILL' 0" }}>home</span>
        </Link>
        <Link
          href="/packages"
          className={`flex flex-col items-center justify-center p-3 transition-colors ${
            isPackages
              ? "text-secondary-fixed-dim bg-primary-container rounded-full ring-2 ring-gold-accent shadow-[0_0_15px_rgba(254,214,101,0.5)]"
              : "text-on-surface-variant hover:text-gold-accent"
          }`}
        >
          <span className="material-symbols-outlined" style={{ fontVariationSettings: isPackages ? "'FILL' 1" : "'FILL' 0" }}>explore</span>
        </Link>
        <Link
          href="/dashboard"
          className={`flex flex-col items-center justify-center p-3 transition-colors ${
            isDashboard
              ? "text-secondary-fixed-dim bg-primary-container rounded-full ring-2 ring-gold-accent shadow-[0_0_15px_rgba(254,214,101,0.5)]"
              : "text-on-surface-variant hover:text-gold-accent"
          }`}
        >
          <span className="material-symbols-outlined" style={{ fontVariationSettings: isDashboard ? "'FILL' 1" : "'FILL' 0" }}>account_balance_wallet</span>
        </Link>
        <Link
          href="/profile"
          className={`flex flex-col items-center justify-center p-3 transition-colors ${
            isProfile
              ? "text-secondary-fixed-dim bg-primary-container rounded-full ring-2 ring-gold-accent shadow-[0_0_15px_rgba(254,214,101,0.5)]"
              : "text-on-surface-variant hover:text-gold-accent"
          }`}
        >
          <span className="material-symbols-outlined" style={{ fontVariationSettings: isProfile ? "'FILL' 1" : "'FILL' 0" }}>person</span>
        </Link>
      </div>
    </div>
  );
}