"use client";

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { cn } from '@/lib/utils';
import { getNavItems } from './nav-items';
import { useDataProvider } from '@/lib/demo/data-provider-context';

export function MobileNav() {
  const pathname = usePathname();
  const { basePath } = useDataProvider();
  const navItems = getNavItems(basePath).filter((item) => item.label !== 'Settings');

  return (
    <nav
      role="navigation"
      aria-label="Main navigation"
      className="md:hidden fixed bottom-0 left-0 right-0 z-30 bg-card/90 backdrop-blur-xl border-t border-border/40 shadow-[0_-1px_3px_rgba(45,52,54,0.04)]"
    >
      <div className="max-w-6xl mx-auto flex items-center justify-around px-1 py-1.5 pb-[calc(0.375rem+env(safe-area-inset-bottom))]">
        {navItems.map((item) => {
          const isActive =
            item.href === basePath
              ? pathname === basePath || pathname === basePath + '/'
              : pathname.startsWith(item.href);

          return (
            <Link
              key={item.href}
              href={item.href}
              aria-label={item.label}
              aria-current={isActive ? 'page' : undefined}
              className={cn(
                'flex flex-col items-center gap-0.5 px-3 py-1.5 rounded-lg text-[10px] transition-colors',
                isActive
                  ? 'text-foreground'
                  : 'text-muted-foreground'
              )}
            >
              <div className={cn(
                "flex items-center justify-center rounded-full transition-colors",
                isActive ? "bg-primary/10 p-1.5" : "p-1.5"
              )}>
                <item.icon className={cn("size-[22px]", isActive && "text-primary")} aria-hidden="true" />
              </div>
              <span className="font-medium">{item.label}</span>
            </Link>
          );
        })}
      </div>
    </nav>
  );
}
