videofolxtv/client/src/components/search-header.tsx

import { useState } from "react";
import { Search, Play, Menu, Grid3X3, List } from "lucide-react";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";

interface SearchHeaderProps {
  onSearch: (query: string) => void;
  onCategoryChange: (category: string) => void;
  onSortChange: (sort: string) => void;
  onViewChange: (view: "grid" | "list") => void;
  categories: string[];
  currentView: "grid" | "list";
}

export default function SearchHeader({
  onSearch,
  onCategoryChange,
  onSortChange,
  onViewChange,
  categories,
  currentView
}: SearchHeaderProps) {
  const [searchQuery, setSearchQuery] = useState("");

  const handleSearchChange = (value: string) => {
    setSearchQuery(value);
    onSearch(value);
  };

  return (
    <div className="bg-bunny-gray/80 backdrop-blur-sm border-b border-gray-700 sticky top-0 z-50">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex items-center justify-between h-16">
          <div className="flex items-center space-x-4">
            <div className="flex items-center space-x-2">
              <Play className="text-bunny-blue text-2xl" />
              <h1 className="text-xl font-bold text-bunny-light">VideoStream</h1>
            </div>
          </div>
          
          <div className="hidden md:flex items-center space-x-6">
            <nav className="flex space-x-6">
              <a href="#" className="text-bunny-light hover:text-bunny-blue transition-colors" data-testid="link-home">
                Home
              </a>
              <a href="#" className="text-bunny-muted hover:text-bunny-light transition-colors" data-testid="link-library">
                Library
              </a>
              <a href="#" className="text-bunny-muted hover:text-bunny-light transition-colors" data-testid="link-upload">
                Upload
              </a>
            </nav>
            
            <div className="relative">
              <Input
                type="search"
                placeholder="Search videos..."
                value={searchQuery}
                onChange={(e) => handleSearchChange(e.target.value)}
                className="bg-bunny-dark border border-gray-600 rounded-lg px-4 py-2 pl-10 text-sm focus:outline-none focus:border-bunny-blue transition-colors w-64"
                data-testid="input-search"
              />
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-bunny-muted w-4 h-4" />
            </div>
          </div>
          
          <Button variant="ghost" className="md:hidden text-bunny-light" data-testid="button-mobile-menu">
            <Menu className="text-xl" />
          </Button>
        </div>
      </div>

      {/* Filter Bar */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
          <div>
            <h2 className="text-2xl font-bold mb-2 text-bunny-light">Video Library</h2>
            <p className="text-bunny-muted">Streaming from Bunny.net CDN</p>
          </div>
          
          <div className="flex flex-wrap gap-3">
            <Select onValueChange={onCategoryChange} data-testid="select-category">
              <SelectTrigger className="bg-bunny-gray border border-gray-600 rounded-lg px-4 py-2 text-sm focus:outline-none focus:border-bunny-blue w-40">
                <SelectValue placeholder="All Categories" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="All Categories">All Categories</SelectItem>
                {categories.map((category) => (
                  <SelectItem key={category} value={category}>
                    {category}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
            
            <Select onValueChange={onSortChange} data-testid="select-sort">
              <SelectTrigger className="bg-bunny-gray border border-gray-600 rounded-lg px-4 py-2 text-sm focus:outline-none focus:border-bunny-blue w-32">
                <SelectValue placeholder="Latest" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="latest">Latest</SelectItem>
                <SelectItem value="views">Most Viewed</SelectItem>
                <SelectItem value="duration">Duration</SelectItem>
                <SelectItem value="title">A-Z</SelectItem>
              </SelectContent>
            </Select>
            
            <div className="flex bg-bunny-gray rounded-lg p-1">
              <Button
                variant={currentView === "grid" ? "default" : "ghost"}
                size="sm"
                onClick={() => onViewChange("grid")}
                className={`px-3 py-1 rounded text-sm ${
                  currentView === "grid" 
                    ? "bg-bunny-blue text-white" 
                    : "text-bunny-muted hover:text-white"
                }`}
                data-testid="button-grid-view"
              >
                <Grid3X3 className="w-4 h-4" />
              </Button>
              <Button
                variant={currentView === "list" ? "default" : "ghost"}
                size="sm"
                onClick={() => onViewChange("list")}
                className={`px-3 py-1 rounded text-sm ${
                  currentView === "list" 
                    ? "bg-bunny-blue text-white" 
                    : "text-bunny-muted hover:text-white"
                }`}
                data-testid="button-list-view"
              >
                <List className="w-4 h-4" />
              </Button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}