function MainComponent() { const [restaurants, setRestaurants] = useState([]); const [categories, setCategories] = useState([]); const [isLoading, setIsLoading] = useState(true); const [error, setError] = useState(null); const [filters, setFilters] = useState({ search: "", category: "", priceRange: "", features: [], sort: "name", order: "asc" }); const [page, setPage] = useState(1); const [pagination, setPagination] = useState(null); // Replace custom debounce implementation with debounce utility const debounce = (func, delay)=>{ let timeoutId; return (...args)=>{ clearTimeout(timeoutId); timeoutId = setTimeout(()=>{ func(...args); }, delay); }; }; const debouncedSearch = useCallback(debounce((searchTerm)=>{ setFilters((prev)=>({ ...prev, search: searchTerm })); setPage(1); }, 400), []); const handleError = (err)=>{ console.error("Error:", err); setError("Unable to load restaurants. Please try again later."); setIsLoading(false); }; const fetchRestaurants = useCallback(async ()=>{ if (!isLoading) setIsLoading(true); setError(null); try { const response = await fetch("/api/list-restaurants", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ ...filters, page, limit: 24 }) }); if (!response.ok) { throw new Error(`Error: ${response.status} ${response.statusText}`); } const result = await response.json(); if (!result.success) { throw new Error(result.error || "Failed to fetch restaurants"); } setRestaurants(result.data); setCategories(result.categories || []); setPagination(result.pagination); } catch (err) { handleError(err); } finally{ setIsLoading(false); } }, [ filters, page, isLoading ]); useEffect(()=>{ fetchRestaurants(); }, [ fetchRestaurants ]); const handleSearchChange = (e)=>{ debouncedSearch(e.target.value); }; const handleFilterChange = (key, value)=>{ setFilters((prev)=>({ ...prev, [key]: value })); setPage(1); }; const handleSortChange = (value)=>{ const [newSort, newOrder] = value.split("-"); setFilters((prev)=>({ ...prev, sort: newSort, order: newOrder })); setPage(1); }; const RestaurantCard = React.memo(({ restaurant })=>/*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300", __source: { fileName: "", lineNumber: 96, columnNumber: 5 }, __self: this }, restaurant.photo_url && /*#__PURE__*/ React.createElement("div", { className: "h-48 overflow-hidden", __source: { fileName: "", lineNumber: 98, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: restaurant.photo_url, alt: restaurant.name, className: "w-full h-full object-cover", loading: "lazy", __source: { fileName: "", lineNumber: 99, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "p-6", __source: { fileName: "", lineNumber: 108, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-start mb-2", __source: { fileName: "", lineNumber: 109, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold text-gray-900", __source: { fileName: "", lineNumber: 110, columnNumber: 11 }, __self: this }, restaurant.name), /*#__PURE__*/ React.createElement("div", { className: "text-gray-600", __source: { fileName: "", lineNumber: 113, columnNumber: 11 }, __self: this }, restaurant.price_range)), restaurant.rating > 0 && /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2 text-gray-600 mb-2", __source: { fileName: "", lineNumber: 117, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 118, columnNumber: 13 }, __self: this }, [ ...Array.from({ length: 5 }) ].map((_, index)=>/*#__PURE__*/ React.createElement("i", { key: index, className: `fas fa-star ${index < Math.floor(restaurant.rating) ? "text-yellow-400" : "text-gray-300"}`, __source: { fileName: "", lineNumber: 120, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 130, columnNumber: 13 }, __self: this }, "(", restaurant.review_count, " reviews)")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2 text-gray-500 mb-2", __source: { fileName: "", lineNumber: 134, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-map-marker-alt", __source: { fileName: "", lineNumber: 135, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 136, columnNumber: 11 }, __self: this }, restaurant.address)), restaurant.phone && /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2 text-gray-500 mb-2", __source: { fileName: "", lineNumber: 140, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-phone", __source: { fileName: "", lineNumber: 141, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("a", { href: `tel:${restaurant.phone}`, className: "hover:text-blue-600", __source: { fileName: "", lineNumber: 142, columnNumber: 13 }, __self: this }, restaurant.phone)), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-2 mt-4", __source: { fileName: "", lineNumber: 148, columnNumber: 9 }, __self: this }, restaurant.website && /*#__PURE__*/ React.createElement("a", { href: restaurant.website, target: "_blank", rel: "noopener noreferrer", className: "inline-flex items-center gap-1 px-3 py-1 bg-blue-50 text-blue-600 rounded-full text-sm hover:bg-blue-100", __source: { fileName: "", lineNumber: 150, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-external-link-alt", __source: { fileName: "", lineNumber: 156, columnNumber: 15 }, __self: this }), "Website"), restaurant.menu_urls?.length > 0 && /*#__PURE__*/ React.createElement("a", { href: restaurant.menu_urls[0], target: "_blank", rel: "noopener noreferrer", className: "inline-flex items-center gap-1 px-3 py-1 bg-green-50 text-green-600 rounded-full text-sm hover:bg-green-100", __source: { fileName: "", lineNumber: 162, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-utensils", __source: { fileName: "", lineNumber: 168, columnNumber: 15 }, __self: this }), "Menu"), restaurant.has_daily_special && /*#__PURE__*/ React.createElement("span", { className: "inline-flex items-center gap-1 px-3 py-1 bg-red-50 text-red-600 rounded-full text-sm", __source: { fileName: "", lineNumber: 174, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-tag", __source: { fileName: "", lineNumber: 175, columnNumber: 15 }, __self: this }), "Daily Special")), restaurant.features?.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "mt-4 flex flex-wrap gap-2", __source: { fileName: "", lineNumber: 182, columnNumber: 11 }, __self: this }, restaurant.features.slice(0, 3).map((feature, index)=>/*#__PURE__*/ React.createElement("span", { key: index, className: "px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded-full", __source: { fileName: "", lineNumber: 184, columnNumber: 15 }, __self: this }, feature)), restaurant.features.length > 3 && /*#__PURE__*/ React.createElement("span", { className: "px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded-full", __source: { fileName: "", lineNumber: 192, columnNumber: 15 }, __self: this }, "+", restaurant.features.length - 3, " more"))))); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-50", __source: { fileName: "", lineNumber: 203, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 py-8", __source: { fileName: "", lineNumber: 204, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-8", __source: { fileName: "", lineNumber: 205, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-gray-900 mb-4", __source: { fileName: "", lineNumber: 206, columnNumber: 11 }, __self: this }, "Ocean City Restaurants"), /*#__PURE__*/ React.createElement("div", { className: "mb-6 flex flex-col md:flex-row gap-4 items-center justify-center", __source: { fileName: "", lineNumber: 210, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Search restaurants...", className: "px-4 py-2 border rounded-lg w-full md:w-64", onChange: handleSearchChange, __source: { fileName: "", lineNumber: 211, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("select", { className: "px-4 py-2 border rounded-lg", onChange: (e)=>handleFilterChange("category", e.target.value), value: filters.category, __source: { fileName: "", lineNumber: 218, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 223, columnNumber: 15 }, __self: this }, "All Categories"), categories.map((category)=>/*#__PURE__*/ React.createElement("option", { key: category, value: category, __source: { fileName: "", lineNumber: 225, columnNumber: 17 }, __self: this }, category.charAt(0).toUpperCase() + category.slice(1)))), /*#__PURE__*/ React.createElement("select", { className: "px-4 py-2 border rounded-lg", onChange: (e)=>handleSortChange(e.target.value), value: `${filters.sort}-${filters.order}`, __source: { fileName: "", lineNumber: 233, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "name-asc", __source: { fileName: "", lineNumber: 238, columnNumber: 15 }, __self: this }, "Name (A-Z)"), /*#__PURE__*/ React.createElement("option", { value: "name-desc", __source: { fileName: "", lineNumber: 239, columnNumber: 15 }, __self: this }, "Name (Z-A)"), /*#__PURE__*/ React.createElement("option", { value: "rating-desc", __source: { fileName: "", lineNumber: 240, columnNumber: 15 }, __self: this }, "Highest Rated"), /*#__PURE__*/ React.createElement("option", { value: "reviews-desc", __source: { fileName: "", lineNumber: 241, columnNumber: 15 }, __self: this }, "Most Reviewed"), /*#__PURE__*/ React.createElement("option", { value: "price-asc", __source: { fileName: "", lineNumber: 242, columnNumber: 15 }, __self: this }, "Price (Low to High)"), /*#__PURE__*/ React.createElement("option", { value: "price-desc", __source: { fileName: "", lineNumber: 243, columnNumber: 15 }, __self: this }, "Price (High to Low)")))), error && /*#__PURE__*/ React.createElement("div", { className: "bg-red-50 text-red-600 p-4 rounded-lg mb-6 text-center", __source: { fileName: "", lineNumber: 249, columnNumber: 11 }, __self: this }, error, /*#__PURE__*/ React.createElement("button", { onClick: fetchRestaurants, className: "ml-4 text-red-700 hover:text-red-800 underline", __source: { fileName: "", lineNumber: 251, columnNumber: 13 }, __self: this }, "Try Again")), isLoading ? /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 261, columnNumber: 11 }, __self: this }, [ ...Array.from({ length: 6 }) ].map((_, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "animate-pulse", __source: { fileName: "", lineNumber: 263, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-md p-6", __source: { fileName: "", lineNumber: 264, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-48 bg-gray-200 rounded mb-4", __source: { fileName: "", lineNumber: 265, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "h-6 bg-gray-200 rounded w-3/4 mb-4", __source: { fileName: "", lineNumber: 266, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "space-y-3", __source: { fileName: "", lineNumber: 267, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-4 bg-gray-200 rounded w-5/6", __source: { fileName: "", lineNumber: 268, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "h-4 bg-gray-200 rounded w-4/6", __source: { fileName: "", lineNumber: 269, columnNumber: 21 }, __self: this })))))) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 277, columnNumber: 13 }, __self: this }, restaurants.map((restaurant)=>/*#__PURE__*/ React.createElement(RestaurantCard, { key: restaurant.id, restaurant: restaurant, __source: { fileName: "", lineNumber: 279, columnNumber: 17 }, __self: this }))), pagination && pagination.totalPages > 1 && /*#__PURE__*/ React.createElement("div", { className: "mt-8 flex justify-center gap-2", __source: { fileName: "", lineNumber: 284, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setPage((prev)=>Math.max(1, prev - 1)), disabled: page === 1, className: "px-4 py-2 border rounded-lg disabled:opacity-50", __source: { fileName: "", lineNumber: 285, columnNumber: 17 }, __self: this }, "Previous"), /*#__PURE__*/ React.createElement("span", { className: "px-4 py-2", __source: { fileName: "", lineNumber: 292, columnNumber: 17 }, __self: this }, "Page ", page, " of ", pagination.totalPages), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setPage((prev)=>prev + 1), disabled: !pagination.hasMore, className: "px-4 py-2 border rounded-lg disabled:opacity-50", __source: { fileName: "", lineNumber: 295, columnNumber: 17 }, __self: this }, "Next"))), !isLoading && restaurants.length === 0 && !error && /*#__PURE__*/ React.createElement("div", { className: "text-center text-gray-500 py-8", __source: { fileName: "", lineNumber: 308, columnNumber: 11 }, __self: this }, "No restaurants found. Try adjusting your filters."))); }