src/components/Navigation.tsx

import React from 'react';
import { ShoppingBag, ChevronLeft, Zap, BatteryLow, BatteryFull } from 'lucide-react';
import { APP_NAME } from '../constants';

interface NavigationProps {
  onBack?: () => void;
  showBack: boolean;
  cooldown?: number;
}

const Navigation: React.FC<NavigationProps> = ({ onBack, showBack, cooldown = 0 }) => {
  return (
    <nav className="sticky top-0 z-50 bg-white border-b border-gray-100 shadow-sm h-16 flex items-center px-4 justify-between">
      <div className="flex items-center gap-2">
        {showBack && (
          <button 
            onClick={onBack}
            className="p-2 hover:bg-gray-100 rounded-full transition-colors mr-1"
          >
            <ChevronLeft className="w-6 h-6 text-gray-700" />
          </button>
        )}
        <div className="flex items-center gap-2">
            <div className="bg-brand-600 p-1.5 rounded-lg">
                <ShoppingBag className="w-5 h-5 text-white" />
            </div>
            <span className="font-bold text-xl tracking-tight text-gray-900">{APP_NAME}</span>
        </div>
      </div>
      
      <div className="flex items-center gap-4">
         {cooldown > 0 ? (
           <div className="flex items-center gap-2 px-3 py-1.5 bg-amber-50 rounded-full border border-amber-100">
              <BatteryLow className="w-3 h-3 text-amber-500" />
              <span className="text-[10px] font-bold text-amber-600 uppercase tracking-tighter">Cooling {cooldown}s</span>
           </div>
         ) : (
           <div className="flex items-center gap-2 px-3 py-1.5 bg-emerald-50 rounded-full border border-emerald-100">
              <BatteryFull className="w-3 h-3 text-emerald-500" />
              <span className="text-[10px] font-bold text-emerald-600 uppercase tracking-tighter">Ready</span>
           </div>
         )}
         <div className="w-8 h-8 bg-gray-200 rounded-full overflow-hidden border border-gray-300">
            <img src="https://picsum.photos/100/100" alt="Profile" className="w-full h-full object-cover" />
         </div>
      </div>
    </nav>
  );
};

export default Navigation;