feat: Implement Combobox component and Autocomplete for Country

src/components/search/SearchFilters.tsx

@@ -8,6 +8,8 @@ import { Slider } from '@/components/ui/slider';
 import { Badge } from '@/components/ui/badge';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
 import { ChevronDown, Filter, X } from 'lucide-react';
+import { Combobox } from '@/components/ui/combobox';
+import { useCountries, useStatesProvinces, useManufacturers, useCompanyHeadquarters } from '@/hooks/useAutocompleteData';
 
 export interface SearchFilters {
   // Park filters
@@ -47,7 +49,13 @@ interface SearchFiltersProps {
 
 export function SearchFiltersComponent({ filters, onFiltersChange, activeTab }: SearchFiltersProps) {
   const [isOpen, setIsOpen] = useState(false);
-  
+
+  // Fetch autocomplete data
+  const { countries, loading: countriesLoading } = useCountries();
+  const { statesProvinces, loading: statesLoading } = useStatesProvinces(filters.country);
+  const { manufacturers, loading: manufacturersLoading } = useManufacturers();
+  const { headquarters, loading: headquartersLoading } = useCompanyHeadquarters();
+
   const updateFilter = (key: keyof SearchFilters, value: any) => {
     onFiltersChange({ ...filters, [key]: value });
   };
@@ -145,19 +153,26 @@ export function SearchFiltersComponent({ filters, onFiltersChange, activeTab }:
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                   <div className="space-y-2">
                     <Label>Country</Label>
-                    <Input
-                      placeholder="Enter country"
-                      value={filters.country || ''}
-                      onChange={(e) => updateFilter('country', e.target.value || undefined)}
+                    <Combobox
+                      options={countries}
+                      value={filters.country}
+                      onValueChange={(value) => updateFilter('country', value || undefined)}
+                      placeholder="Select country"
+                      searchPlaceholder="Search countries..."
+                      loading={countriesLoading}
                     />
                   </div>
 
                   <div className="space-y-2">
                     <Label>State/Province</Label>
-                    <Input
-                      placeholder="Enter state/province"
-                      value={filters.stateProvince || ''}
-                      onChange={(e) => updateFilter('stateProvince', e.target.value || undefined)}
+                    <Combobox
+                      options={statesProvinces}
+                      value={filters.stateProvince}
+                      onValueChange={(value) => updateFilter('stateProvince', value || undefined)}
+                      placeholder="Select state/province"
+                      searchPlaceholder="Search states/provinces..."
+                      loading={statesLoading}
+                      disabled={!filters.country}
                     />
                   </div>
                 </div>
@@ -273,6 +288,18 @@ export function SearchFiltersComponent({ filters, onFiltersChange, activeTab }:
                   </div>
                 </div>
 
+                <div className="space-y-2">
+                  <Label>Manufacturer</Label>
+                  <Combobox
+                    options={manufacturers}
+                    value={filters.manufacturer}
+                    onValueChange={(value) => updateFilter('manufacturer', value || undefined)}
+                    placeholder="Select manufacturer"
+                    searchPlaceholder="Search manufacturers..."
+                    loading={manufacturersLoading}
+                  />
+                </div>
+
                 <div className="space-y-4">
                   <div className="space-y-2">
                     <div className="flex items-center justify-between">
@@ -343,10 +370,13 @@ export function SearchFiltersComponent({ filters, onFiltersChange, activeTab }:
 
                   <div className="space-y-2">
                     <Label>Headquarters</Label>
-                    <Input
-                      placeholder="Enter country/location"
-                      value={filters.headquarters || ''}
-                      onChange={(e) => updateFilter('headquarters', e.target.value || undefined)}
+                    <Combobox
+                      options={headquarters}
+                      value={filters.headquarters}
+                      onValueChange={(value) => updateFilter('headquarters', value || undefined)}
+                      placeholder="Select headquarters"
+                      searchPlaceholder="Search headquarters..."
+                      loading={headquartersLoading}
                     />
                   </div>
                 </div>

src/components/ui/combobox.tsx

@@ -0,0 +1,96 @@
+import * as React from "react";
+import { Check, ChevronsUpDown } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+
+export interface ComboboxOption {
+  label: string;
+  value: string;
+}
+
+interface ComboboxProps {
+  options: ComboboxOption[];
+  value?: string;
+  onValueChange?: (value: string) => void;
+  placeholder?: string;
+  searchPlaceholder?: string;
+  emptyText?: string;
+  disabled?: boolean;
+  className?: string;
+  loading?: boolean;
+}
+
+export function Combobox({
+  options,
+  value,
+  onValueChange,
+  placeholder = "Select option...",
+  searchPlaceholder = "Search...",
+  emptyText = "No options found.",
+  disabled = false,
+  className,
+  loading = false,
+}: ComboboxProps) {
+  const [open, setOpen] = React.useState(false);
+
+  const selectedOption = options.find((option) => option.value === value);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className={cn("w-full justify-between", className)}
+          disabled={disabled}
+        >
+          {selectedOption ? selectedOption.label : placeholder}
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-full p-0" align="start">
+        <Command>
+          <CommandInput placeholder={searchPlaceholder} />
+          <CommandList>
+            <CommandEmpty>{loading ? "Loading..." : emptyText}</CommandEmpty>
+            <CommandGroup>
+              {options.map((option) => (
+                <CommandItem
+                  key={option.value}
+                  value={option.value}
+                  onSelect={(currentValue) => {
+                    const newValue = currentValue === value ? "" : currentValue;
+                    onValueChange?.(newValue);
+                    setOpen(false);
+                  }}
+                >
+                  <Check
+                    className={cn(
+                      "mr-2 h-4 w-4",
+                      value === option.value ? "opacity-100" : "opacity-0"
+                    )}
+                  />
+                  {option.label}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}