function MainComponent() { const [courses, setCourses] = useState([]); const [isLoading, setIsLoading] = useState(true); const [error, setError] = useState(null); const [selectedType, setSelectedType] = useState(""); const [selectedFeatures, setSelectedFeatures] = useState([]); const courseTypes = [ { id: "public", name: "Public Courses", icon: "fa-golf-ball" }, { id: "private", name: "Private Clubs", icon: "fa-shield-alt" }, { id: "resort", name: "Resort Courses", icon: "fa-hotel" }, { id: "municipal", name: "Municipal Courses", icon: "fa-city" } ]; const features = [ { id: "pro_shop", name: "Pro Shop", icon: "fa-store" }, { id: "driving_range", name: "Driving Range", icon: "fa-golf-ball" }, { id: "restaurant", name: "Restaurant", icon: "fa-utensils" }, { id: "lessons", name: "Golf Lessons", icon: "fa-chalkboard-teacher" }, { id: "cart_rental", name: "Cart Rental", icon: "fa-truck-pickup" }, { id: "club_rental", name: "Club Rental", icon: "fa-golf-club" }, { id: "practice_green", name: "Practice Green", icon: "fa-flag" } ]; const fetchCourses = async ()=>{ setIsLoading(true); setError(null); try { const response = await fetch("/api/golf-courses", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ course_type: selectedType || null, features: selectedFeatures.length > 0 ? selectedFeatures : null }) }); if (!response.ok) throw new Error("Failed to fetch golf courses"); const data = await response.json(); setCourses(data.data || []); } catch (err) { console.error("Error fetching courses:", err); setError("Failed to fetch golf courses. Please try again."); } finally{ setIsLoading(false); } }; useEffect(()=>{ fetchCourses(); }, [ selectedType, selectedFeatures ]); const toggleFeature = (featureId)=>{ setSelectedFeatures((prev)=>prev.includes(featureId) ? prev.filter((f)=>f !== featureId) : [ ...prev, featureId ]); }; return /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 py-8", __source: { fileName: "", lineNumber: 63, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-12", __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-gray-900 mb-4", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, "Golf Courses in Ocean City"), /*#__PURE__*/ React.createElement("p", { className: "text-xl text-gray-600 mb-8", __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }, "Discover the finest golf courses in and around Ocean City, Maryland"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center gap-4 mb-8", __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setSelectedType(""), className: `px-6 py-3 rounded-full transition-colors ${selectedType === "" ? "bg-blue-600 text-white" : "bg-gray-100 text-gray-700 hover:bg-gray-200"}`, __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }, "All Courses"), courseTypes.map((type)=>/*#__PURE__*/ React.createElement("button", { key: type.id, onClick: ()=>setSelectedType(type.id), className: `flex items-center gap-2 px-6 py-3 rounded-full transition-colors ${selectedType === type.id ? "bg-blue-600 text-white" : "bg-gray-100 text-gray-700 hover:bg-gray-200"}`, __source: { fileName: "", lineNumber: 84, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${type.icon}`, __source: { fileName: "", lineNumber: 93, columnNumber: 15 }, __self: this }), type.name))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center gap-3 mb-12", __source: { fileName: "", lineNumber: 99, columnNumber: 9 }, __self: this }, features.map((feature)=>/*#__PURE__*/ React.createElement("button", { key: feature.id, onClick: ()=>toggleFeature(feature.id), className: `flex items-center gap-2 px-4 py-2 rounded-full transition-colors ${selectedFeatures.includes(feature.id) ? "bg-blue-600 text-white" : "bg-gray-100 text-gray-700 hover:bg-gray-200"}`, __source: { fileName: "", lineNumber: 101, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${feature.icon}`, __source: { fileName: "", lineNumber: 110, columnNumber: 15 }, __self: this }), feature.name))), error && /*#__PURE__*/ React.createElement("div", { className: "bg-red-50 text-red-600 p-4 rounded-md mb-6", __source: { fileName: "", lineNumber: 117, columnNumber: 11 }, __self: this }, error), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 122, columnNumber: 9 }, __self: this }, isLoading ? Array.from({ length: 6 }).map((_, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "animate-pulse", __source: { fileName: "", lineNumber: 125, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gray-200 h-48 rounded-lg mb-4", __source: { fileName: "", lineNumber: 126, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "h-4 bg-gray-200 rounded w-3/4 mb-2", __source: { fileName: "", lineNumber: 127, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "h-4 bg-gray-200 rounded w-1/2", __source: { fileName: "", lineNumber: 128, columnNumber: 19 }, __self: this }))) : courses.map((course)=>/*#__PURE__*/ React.createElement("div", { key: course.id, className: "bg-white rounded-lg shadow-md overflow-hidden", __source: { fileName: "", lineNumber: 132, columnNumber: 17 }, __self: this }, course.image_url && /*#__PURE__*/ React.createElement("img", { src: course.image_url, alt: `${course.name} golf course`, className: "w-full h-48 object-cover", __source: { fileName: "", lineNumber: 137, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 143, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold text-xl mb-2", __source: { fileName: "", lineNumber: 144, columnNumber: 21 }, __self: this }, course.name), /*#__PURE__*/ React.createElement("div", { className: "mb-3", __source: { fileName: "", lineNumber: 146, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-blue-600 font-semibold", __source: { fileName: "", lineNumber: 147, columnNumber: 23 }, __self: this }, course.course_type.charAt(0).toUpperCase() + course.course_type.slice(1), " Course"), course.designer && /*#__PURE__*/ React.createElement("span", { className: "text-gray-600 text-sm ml-2", __source: { fileName: "", lineNumber: 151, columnNumber: 25 }, __self: this }, "Designed by ", course.designer)), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 text-sm mb-4", __source: { fileName: "", lineNumber: 157, columnNumber: 21 }, __self: this }, course.description), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-2 mb-4", __source: { fileName: "", lineNumber: 161, columnNumber: 21 }, __self: this }, course.features && course.features.map((feature)=>/*#__PURE__*/ React.createElement("span", { key: feature, className: "bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded", __source: { fileName: "", lineNumber: 163, columnNumber: 25 }, __self: this }, feature))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between text-sm", __source: { fileName: "", lineNumber: 172, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-600", __source: { fileName: "", lineNumber: 173, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-map-marker-alt mr-2", __source: { fileName: "", lineNumber: 174, columnNumber: 25 }, __self: this }), course.location), course.website && /*#__PURE__*/ React.createElement("a", { href: course.website, target: "_blank", rel: "noopener noreferrer", className: "text-blue-600 hover:underline", __source: { fileName: "", lineNumber: 178, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-external-link-alt mr-1", __source: { fileName: "", lineNumber: 184, columnNumber: 27 }, __self: this }), "Visit Website")))))), !isLoading && courses.length === 0 && /*#__PURE__*/ React.createElement("div", { className: "text-center py-8 text-gray-500", __source: { fileName: "", lineNumber: 195, columnNumber: 11 }, __self: this }, "No golf courses found matching your criteria."))); }