thrilltrack-explorer/src/components/layout/Header.tsx

import { useState } from 'react';
import { Search, Menu, Zap, MapPin, Star, ChevronDown, Building, Users, Crown, Palette } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
import { Badge } from '@/components/ui/badge';
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
import { Link, useNavigate } from 'react-router-dom';
import { SearchDropdown } from '@/components/search/SearchDropdown';
import { AuthButtons } from '@/components/auth/AuthButtons';
import { ThemeToggle } from '@/components/theme/ThemeToggle';
export function Header() {
  const navigate = useNavigate();
  return <header className="sticky top-0 z-50 w-full border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
      <div className="container flex h-16 items-center justify-between px-4">
        {/* Logo and Brand */}
        <div className="flex items-center gap-4">
          <Link to="/" className="flex items-center gap-2">
            <div className="relative">
              <Zap className="h-8 w-8 text-primary" />
              <div className="absolute inset-0 blur-sm bg-primary/20 rounded-full"></div>
            </div>
            <div className="flex flex-col">
              <h1 className="text-xl font-bold bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent">
                ThrillWiki
              </h1>
              
            </div>
          </Link>
          
          {/* Desktop Navigation */}
          <nav className="hidden md:flex items-center gap-6 ml-8">
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="ghost" className="text-sm font-medium hover:text-primary">
                  <Search className="w-4 h-4 mr-2" />
                  Explore
                  <ChevronDown className="w-4 h-4 ml-1" />
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="start" className="w-48 bg-background border border-border shadow-lg">
                <DropdownMenuItem onClick={() => navigate('/parks')}>
                  <MapPin className="w-4 h-4 mr-2" />
                  Parks
                </DropdownMenuItem>
                <DropdownMenuItem onClick={() => navigate('/rides')}>
                  🎢 <span className="ml-2">Rides</span>
                </DropdownMenuItem>
                <DropdownMenuItem onClick={() => navigate('/manufacturers')}>
                  🏭 <span className="ml-2">Manufacturers</span>
                </DropdownMenuItem>
                <DropdownMenuItem onClick={() => navigate('/operators')}>
                  <Building className="w-4 h-4 mr-2" />
                  Operators
                </DropdownMenuItem>
                <DropdownMenuItem onClick={() => navigate('/owners')}>
                  <Crown className="w-4 h-4 mr-2" />
                  Owners
                </DropdownMenuItem>
                <DropdownMenuItem onClick={() => navigate('/designers')}>
                  <Palette className="w-4 h-4 mr-2" />
                  Designers
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
            
          </nav>
        </div>

        {/* Search Bar */}
        <div className="flex-1 max-w-xl mx-4">
          <SearchDropdown />
        </div>

        {/* User Actions */}
        <div className="flex items-center gap-2">
          <ThemeToggle />
          <AuthButtons />
          
          {/* Mobile Menu */}
          <Sheet>
            <SheetTrigger asChild>
              <Button variant="ghost" size="sm" className="md:hidden">
                <Menu className="h-4 w-4" />
              </Button>
            </SheetTrigger>
            <SheetContent side="right" className="w-[300px] sm:w-[400px]">
              <div className="flex flex-col gap-4 mt-8">
                <div className="text-sm font-semibold text-muted-foreground mb-2">Explore</div>
                <Button variant="ghost" className="justify-start" onClick={() => navigate('/parks')}>
                  <MapPin className="w-4 h-4 mr-2" />
                  Parks
                </Button>
                <Button variant="ghost" className="justify-start" onClick={() => navigate('/rides')}>
                  🎢 Rides
                </Button>
                <Button variant="ghost" className="justify-start" onClick={() => navigate('/manufacturers')}>
                  🏭 Manufacturers
                </Button>
                <Button variant="ghost" className="justify-start" onClick={() => navigate('/operators')}>
                  <Building className="w-4 h-4 mr-2" />
                  Operators
                </Button>
                <Button variant="ghost" className="justify-start" onClick={() => navigate('/owners')}>
                  <Crown className="w-4 h-4 mr-2" />
                  Owners
                </Button>
                <Button variant="ghost" className="justify-start" onClick={() => navigate('/designers')}>
                  <Palette className="w-4 h-4 mr-2" />
                  Designers
                </Button>
                <div className="border-t pt-4 mt-4">
                  <Button variant="ghost" className="justify-start">
                    <Star className="w-4 h-4 mr-2" />
                    Reviews
                  </Button>
                </div>
                <div className="border-t pt-4 mt-4">
                  <div className="mb-3">
                    <ThemeToggle />
                  </div>
                  <Button variant="outline" className="w-full mb-2">
                    Sign In
                  </Button>
                  <Button className="w-full bg-gradient-to-r from-primary to-accent">
                    Join ThrillWiki
                  </Button>
                </div>
              </div>
            </SheetContent>
          </Sheet>
        </div>
      </div>
    </header>;
}