feat: Implement modern search with autocomplete

src/components/parks/ParkSearch.tsx

@@ -1,38 +1,28 @@
-import { useState } from 'react';
-import { Search, X } from 'lucide-react';
-import { Input } from '@/components/ui/input';
-import { Button } from '@/components/ui/button';
+import { AutocompleteSearch } from '@/components/search/AutocompleteSearch';
+import { SearchResult } from '@/hooks/useSearch';
 
 interface ParkSearchProps {
   value: string;
   onChange: (value: string) => void;
   placeholder?: string;
+  onResultSelect?: (result: SearchResult) => void;
 }
 
 export function ParkSearch({ 
   value, 
   onChange, 
-  placeholder = "Search parks, locations, descriptions..." 
+  placeholder = "Search parks, locations, descriptions...",
+  onResultSelect 
 }: ParkSearchProps) {
   return (
-    <div className="relative">
-      <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
-      <Input
-        placeholder={placeholder}
-        value={value}
-        onChange={(e) => onChange(e.target.value)}
-        className="pl-10 pr-10 bg-muted/50 border-border/50 focus:border-primary/50 transition-colors"
-      />
-      {value && (
-        <Button
-          variant="ghost"
-          size="sm"
-          onClick={() => onChange('')}
-          className="absolute right-1 top-1/2 transform -translate-y-1/2 h-8 w-8 p-0 hover:bg-muted"
-        >
-          <X className="w-3 h-3" />
-        </Button>
-      )}
-    </div>
+    <AutocompleteSearch
+      placeholder={placeholder}
+      types={['park']}
+      limit={8}
+      onSearch={(query) => onChange(query)}
+      onResultSelect={onResultSelect}
+      showRecentSearches={false}
+      className="w-full"
+    />
   );
 }