client/src/components/layout/header.tsx

import { Link, useLocation } from "wouter";
import logoUrl from "@assets/assets_task_01k3qp9hccec89tp5ht8ee88x5_1756363038_img_1-removebg-preview (1)_1756364677577.png";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Search, Package } from "lucide-react";
import { useAuth } from "@/hooks/use-auth";

interface HeaderProps {
  searchQuery: string;
  setSearchQuery: (query: string) => void;
}

export default function Header({ searchQuery, setSearchQuery }: HeaderProps) {
  const [, setLocation] = useLocation();
  const { isAuthenticated, userType } = useAuth();

  const handleSearch = (e: React.FormEvent) => {
    e.preventDefault();
    if (searchQuery.trim()) {
      setLocation(`/search?q=${encodeURIComponent(searchQuery.trim())}`);
    }
  };


  return (
    <header className="bg-gradient-to-b from-orange-50/60 to-orange-100/40 backdrop-blur-sm fixed top-0 left-0 right-0 z-[100] shadow-sm border-b border-orange-200/60" data-testid="header">
      <div className="max-w-7xl mx-auto px-3 sm:px-4 lg:px-6">
        <div className="flex items-center justify-between h-16">
          {/* Logo */}
          <div className="flex-shrink-0">
            <Link href="/">
              <div className="cursor-pointer" data-testid="logo">
                <img 
                  src={logoUrl} 
                  alt="Shoposphere" 
                  className="h-12 w-auto"
                />
              </div>
            </Link>
          </div>


          {/* Search Bar - Centered */}
          <div className="flex-1 max-w-xl mx-8">
            <form onSubmit={handleSearch} className="relative">
              <div className="relative">
                <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400" />
                <Input
                  type="text"
                  placeholder="Search products..."
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  className="w-full pl-12 pr-4 py-3 rounded-full border border-orange-200/60 focus:ring-2 focus:ring-orange-200 focus:border-orange-500 bg-gradient-to-r from-white to-orange-50/30 shadow-sm transition-all duration-200"
                  data-testid="search-input"
                  aria-label="Search for products"
                  role="searchbox"
                />
              </div>
            </form>
          </div>

          {/* Orders Button (Desktop) */}
          {isAuthenticated && userType === 'user' && (
            <div className="hidden md:flex items-center">
              <Link href="/orders">
                <Button
                  variant="ghost"
                  className="text-gray-700 hover:text-orange-600 hover:bg-orange-50"
                  data-testid="orders-button"
                >
                  <Package className="h-5 w-5 mr-2" />
                  My Orders
                </Button>
              </Link>
            </div>
          )}

        </div>

      </div>

    </header>
  );
}