function MainComponent() { const [products, setProducts] = React.useState([]); const [makeupType, setMakeupType] = React.useState(''); const [skinType, setSkinType] = React.useState(''); const [budget, setBudget] = React.useState(''); const handleSearch = async ()=>{ const response = await fetch(`/integrations/product-search/search?q=${makeupType}&max_price=${budget}&product_condition=NEW`, { method: 'GET' }); const data = await response.json(); setProducts(data.data.slice(0, 3)); }; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#ffc0cb] p-4 h-screen", __source: { fileName: "", lineNumber: 16, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-new-money-serif text-4xl text-center mt-4", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }, "Make-up find"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center mt-8 space-y-4", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("select", { name: "makeup_type", value: makeupType, onChange: (e)=>setMakeupType(e.target.value), className: "p-2 border border-gray-300 w-[300px] font-new-money-serif", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }, "Select Makeup Type"), /*#__PURE__*/ React.createElement("option", { value: "foundation", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, "Foundation"), /*#__PURE__*/ React.createElement("option", { value: "concealer", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, "Concealer"), /*#__PURE__*/ React.createElement("option", { value: "contour", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, "Contour"), /*#__PURE__*/ React.createElement("option", { value: "blush", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, "Blush"), /*#__PURE__*/ React.createElement("option", { value: "highlighter", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, "Highlighter"), /*#__PURE__*/ React.createElement("option", { value: "setting powder", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, "Setting Powder"), /*#__PURE__*/ React.createElement("option", { value: "eyeshadow", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, "Eyeshadow"), /*#__PURE__*/ React.createElement("option", { value: "mascara", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, "Mascara"), /*#__PURE__*/ React.createElement("option", { value: "lipstick", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, "Lipstick"), /*#__PURE__*/ React.createElement("option", { value: "lipliner", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, "Lipliner"), /*#__PURE__*/ React.createElement("option", { value: "gloss", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, "Gloss"), /*#__PURE__*/ React.createElement("option", { value: "eyeliner", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, "Eyeliner"), /*#__PURE__*/ React.createElement("option", { value: "primer", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, "Primer")), /*#__PURE__*/ React.createElement("select", { name: "skin_type", value: skinType, onChange: (e)=>setSkinType(e.target.value), className: "p-2 border border-gray-300 w-[300px] font-new-money-serif", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, "Select Skin Type"), /*#__PURE__*/ React.createElement("option", { value: "dry", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, "Dry Skin"), /*#__PURE__*/ React.createElement("option", { value: "oily", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, "Oily Skin"), /*#__PURE__*/ React.createElement("option", { value: "normal", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, "Normal Skin")), /*#__PURE__*/ React.createElement("input", { type: "number", name: "budget", placeholder: "Enter budget", value: budget, onChange: (e)=>setBudget(e.target.value), className: "p-2 border border-gray-300 w-[300px] font-new-money-serif", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleSearch, className: "px-4 py-2 bg-white text-[#ffc0cb] border-none rounded-md font-new-money-serif", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, "Search")), /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this }, products.map((product)=>/*#__PURE__*/ React.createElement("div", { key: product.product_id, className: "p-2 font-new-money-serif border border-gray-200 m-2 rounded-md", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }, product.product_title), /*#__PURE__*/ React.createElement("img", { src: product.product_photos[0], alt: `Image of ${product.product_title}`, className: "w-full h-[200px] object-cover", __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }, product.product_attributes.Brand), /*#__PURE__*/ React.createElement("a", { href: product.product_page_url, className: "text-blue-500", __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }, "View Product"))))); }