'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { cn } from '@/lib/utils';
import { Home, LayoutGrid, Info, User } from 'lucide-react';

const navLinks = [
  { href: '/home', label: 'Home', icon: Home },
  { href: '/categories', label: 'Categories', icon: LayoutGrid },
  { href: '/about-us', label: 'About', icon: Info },
  { href: '/reviews', label: 'Profile', icon: User },
];

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

  return (
    <div className="fixed bottom-0 left-0 z-50 w-full border-t bg-card/80 backdrop-blur-sm md:hidden">
      <nav className="grid h-16 grid-cols-4 items-center">
        {navLinks.map((link) => (
          <Link
            key={link.href}
            href={link.href}
            className={cn(
              'flex flex-col items-center justify-center gap-1 text-xs font-medium transition-colors',
              pathname === link.href ? 'text-accent' : 'text-muted-foreground hover:text-primary'
            )}
          >
            <link.icon className="h-6 w-6" />
            <span>{link.label}</span>
          </Link>
        ))}
      </nav>
    </div>
  );
}