function MainComponent() { const [souvenirs, setSouvenirs] = React.useState([]); const [searchTerm, setSearchTerm] = React.useState(""); const [reviews, setReviews] = React.useState({}); const [favorites, setFavorites] = React.useState(new Set()); const [language, setLanguage] = React.useState('en'); React.useEffect(()=>{ fetch("/api/souvenirs").then((res)=>res.json()).then((data)=>setSouvenirs(data)).catch((err)=>console.error("Error loading souvenirs:", err)); }, []); const handleSearch = ()=>{ fetch('/integrations/google-place-autocomplete/autocomplete/json?input=' + searchTerm + '&radius=500').then((res)=>res.json()).then((data)=>{ const placeIds = data.predictions.map((p)=>p.place_id); fetch(`/api/souvenirs?placeIds=${placeIds.join(',')}`).then((res)=>res.json()).then((data)=>setSouvenirs(data)).catch((err)=>console.error("Error searching with placeIds:", err)); }).catch((err)=>console.error("Error with Google Place Autocomplete:", err)); }; const translateText = (text)=>{ fetch('/integrations/google-translate/language/translate/v2', { method: 'POST', body: new URLSearchParams({ q: text, target: language }) }).then((response)=>response.json()).then((data)=>data.data.translations[0].translatedText); }; const handleInputChange = (event)=>{ setSearchTerm(event.target.value); }; const addToFavorites = (souvenirId)=>{ setFavorites(new Set(favorites).add(souvenirId)); }; const changeLanguage = (newLanguage)=>{ setLanguage(newLanguage); // Translate souvenirs descriptions, names, and reviews const translatedSouvenirs = souvenirs.map((souvenir)=>({ ...souvenir, name: translateText(souvenir.name), description: translateText(souvenir.description) })); setSouvenirs(translatedSouvenirs); const translatedReviews = {}; for (const [key, value] of Object.entries(reviews)){ translatedReviews[key] = value.map((review)=>({ ...review, text: translateText(review.text) })); } setReviews(translatedReviews); }; const souvenirElements = souvenirs.map((souvenir)=>/*#__PURE__*/ React.createElement("div", { key: souvenir.id, className: "border p-4", __source: { fileName: "", lineNumber: 64, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: souvenir.imageUrl, alt: `${souvenir.name} - ${souvenir.description}`, className: "w-full h-[200px]", __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-md mt-2", __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this }, souvenir.name), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 67, columnNumber: 7 }, __self: this }, `$${souvenir.price} - Available at ${souvenir.purchaseLocations.join(', ')}`), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 68, columnNumber: 7 }, __self: this }, "Ratings: ", Array(souvenir.rating).fill('⭐').join(''), "☆"), /*#__PURE__*/ React.createElement("button", { className: "bg-green-500 text-white p-2 mt-4 rounded", onClick: ()=>addToFavorites(souvenir.id), __source: { fileName: "", lineNumber: 69, columnNumber: 7 }, __self: this }, "Add to Favorites"))); return /*#__PURE__*/ React.createElement("div", { className: "font-roboto", __source: { fileName: "", lineNumber: 74, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#F0F2F5] p-4", __source: { fileName: "", lineNumber: 75, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl text-center", __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this }, "Souvenir Showcase"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center my-4", __source: { fileName: "", lineNumber: 77, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: searchTerm, onChange: handleInputChange, name: "search", placeholder: "Search by region or name", className: "border p-2 w-[300px] rounded", __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white p-2 ml-2 rounded", onClick: handleSearch, __source: { fileName: "", lineNumber: 86, columnNumber: 11 }, __self: this }, "Search"))), /*#__PURE__*/ React.createElement("main", { className: "p-4", __source: { fileName: "", lineNumber: 89, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { __source: { fileName: "", lineNumber: 90, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg mb-3", __source: { fileName: "", lineNumber: 91, columnNumber: 11 }, __self: this }, "Popular Souvenirs by Region"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 92, columnNumber: 11 }, __self: this }, souvenirElements)), /*#__PURE__*/ React.createElement("section", { className: "mt-6", __source: { fileName: "", lineNumber: 96, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg mb-3", __source: { fileName: "", lineNumber: 97, columnNumber: 11 }, __self: this }, "Find Stores on Map"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 98, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#F0F2F5] p-4 text-center", __source: { fileName: "", lineNumber: 103, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 104, columnNumber: 9 }, __self: this }, "© 2023 Souvenir Showcase. All rights reserved."))); }