import { NavLink, useLocation } from 'react-router-dom';

/**
 * Breadcrumb-style top navigation (optional secondary nav)
 */
function Navigation() {
  const location = useLocation();

  const breadcrumbs = {
    '/dashboard': [{ label: 'Dashboard', path: '/dashboard' }],
    '/leads':     [{ label: 'Leads', path: '/leads' }],
    '/settings':  [{ label: 'Settings', path: '/settings' }],
  };

  const crumbs = breadcrumbs[location.pathname] || [];

  if (crumbs.length === 0) return null;

  return (
    <nav aria-label="Breadcrumb" className="flex items-center gap-2 text-sm text-slate-500 mb-6">
      <NavLink to="/dashboard" className="hover:text-slate-700 transition-colors">
        Home
      </NavLink>
      {crumbs.map((crumb, index) => (
        <span key={crumb.path} className="flex items-center gap-2">
          <svg className="w-4 h-4 text-slate-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
          </svg>
          {index === crumbs.length - 1 ? (
            <span className="text-slate-900 font-medium">{crumb.label}</span>
          ) : (
            <NavLink to={crumb.path} className="hover:text-slate-700 transition-colors">
              {crumb.label}
            </NavLink>
          )}
        </span>
      ))}
    </nav>
  );
}

export default Navigation;