import React from 'react';
import { Link, useLocation } from 'react-router-dom';
import { Film, Heart, Users, Settings } from 'lucide-react';
import { useAppContext } from '../store/AppContext';

export const Navbar: React.FC = () => {
  const location = useLocation();
  const { user, matches } = useAppContext();

  const navItems = [
    { path: '/', icon: Users, label: 'Partner' },
    { path: '/swipe', icon: Film, label: 'Discover' },
    { path: '/matches', icon: Heart, label: 'Matches', badge: matches.length },
    { path: '/settings', icon: Settings, label: 'Settings', requiresAuth: true },
  ];

  return (
    <nav className="fixed bottom-0 w-full bg-surface border-t border-border pb-safe">
      <div className="flex justify-around items-center h-16 max-w-md mx-auto">
        {navItems.map(({ path, icon: Icon, label, badge, requiresAuth }) => {
          const isActive = location.pathname === path;
          const isDisabled = requiresAuth && !user;

          if (isDisabled) {
            return (
              <div
                key={path}
                className="flex flex-col items-center justify-center w-full h-full space-y-1 text-slate-600 cursor-not-allowed"
              >
                <Icon size={24} />
                <span className="text-xs font-medium">{label}</span>
              </div>
            );
          }

          return (
            <Link
              key={path}
              to={path}
              className={`flex flex-col items-center justify-center w-full h-full space-y-1 ${
                isActive ? 'text-primary' : 'text-slate-400 hover:text-slate-200'
              }`}
            >
              <div className="relative">
                <Icon size={24} />
                {badge !== undefined && badge > 0 && (
                  <span className="absolute -top-2 -right-2 bg-primary text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">
                    {badge}
                  </span>
                )}
              </div>
              <span className="text-xs font-medium">{label}</span>
            </Link>
          );
        })}
      </div>
    </nav>
  );
};