WFDASHDRIVER-APP/components/BottomNav.tsx

'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { List, Map, Settings } from 'lucide-react';
import { cn } from '@/lib/utils';

const navItems = [
  { href: '/', label: 'List', icon: List },
  { href: '/map/', label: 'Map', icon: Map },
  { href: '/settings/', label: 'Settings', icon: Settings },
];

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

  return (
    <nav className="fixed bottom-0 left-0 right-0 z-50 bg-white border-t border-gray-200 safe-bottom shadow-lg">
      <div className="flex justify-around items-center h-16">
        {navItems.map((item) => {
          const Icon = item.icon;
          const isActive = pathname === item.href;

          return (
            <Link
              key={item.href}
              href={item.href}
              className={cn(
                'flex flex-col items-center justify-center flex-1 h-full touch-manipulation',
                'active:scale-95 transition-transform duration-150',
                isActive ? 'text-primary-600' : 'text-gray-500'
              )}
            >
              <Icon
                size={22}
                strokeWidth={isActive ? 2.5 : 2}
                className={cn(
                  'transition-colors duration-200',
                  isActive && 'drop-shadow-sm'
                )}
              />
              <span
                className={cn(
                  'text-[10px] mt-0.5 font-medium transition-colors duration-200',
                  isActive ? 'text-primary-600' : 'text-gray-400'
                )}
              >
                {item.label}
              </span>
            </Link>
          );
        })}
      </div>
    </nav>
  );
}