function MainComponent() { const [input, setInput] = React.useState(''); const [places, setPlaces] = React.useState([]); const [businesses, setBusinesses] = React.useState([]); const handleSearchChange = (e)=>{ setInput(e.target.value); if (e.target.value.length > 2) { fetch(`/integrations/google-place-autocomplete/autocomplete/json?input=${e.target.value}&radius=500`, { method: 'GET' }).then((response)=>response.json()).then((data)=>{ setPlaces(data.predictions.map((place)=>place.description)); }); } }; const searchRamens = (place)=>{ setInput(place); setPlaces([]); fetch(`/integrations/local-business-data/search?query=ラーメン+in+${place}&language=ja®ion=jp&subtypes=Restaurant&verified=true&business_status=OPEN`, { method: 'GET' }).then((response)=>response.json()).then((data)=>{ setBusinesses(data.data.filter((business)=>business.rating >= 4)); }); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 p-4", __source: { fileName: "", lineNumber: 32, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-semibold text-center mb-4", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, "Top Rated Ramen Shops in Japan"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: input, onChange: handleSearchChange, className: "form-input px-4 py-2 border rounded w-full max-w-md mb-4", placeholder: "Search places in Japan...", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }), places.length > 0 && /*#__PURE__*/ React.createElement("ul", { className: "list-none bg-white rounded shadow-lg p-2 max-w-md w-full mb-4", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, places.map((place, index)=>/*#__PURE__*/ React.createElement("li", { key: index, onClick: ()=>searchRamens(place), className: "p-2 hover:bg-gray-200 cursor-pointer", __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this }, place))), businesses.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, businesses.map((business, id)=>/*#__PURE__*/ React.createElement("div", { key: id, className: "bg-white p-4 rounded-lg shadow space-y-2", __source: { fileName: "", lineNumber: 58, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold", __source: { fileName: "", lineNumber: 59, columnNumber: 17 }, __self: this }, business.name), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 60, columnNumber: 17 }, __self: this }, business.full_address), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 61, columnNumber: 17 }, __self: this }, "Rating: ", business.rating, " ⭐"), /*#__PURE__*/ React.createElement("a", { href: business.place_link, target: "_blank", rel: "noopener noreferrer", className: "text-blue-500 hover:underline", __source: { fileName: "", lineNumber: 62, columnNumber: 17 }, __self: this }, "View on Google Maps")))))); }