function MainComponent() { const [ingredients, setIngredients] = React.useState(''); const [suggestions, setSuggestions] = React.useState(null); const [autoCompleteOptions, setAutoCompleteOptions] = React.useState([]); const [premiumSuggestions, setPremiumSuggestions] = React.useState([]); const fetchPremiumSuggestions = async ()=>{ try { // Replace with the actual URL of the Google Sheet API const response = await fetch('URL_of_Google_Sheet_API'); const data = await response.json(); const recipeNames = data.map((recipe)=>recipe.name); setPremiumSuggestions(recipeNames); } catch (error) { console.error('Error fetching premium suggestions:', error); } }; React.useEffect(()=>{ fetchPremiumSuggestions(); }, []); const handleInputChange = (event)=>{ const value = event.target.value; setIngredients(value); if (!value) { setAutoCompleteOptions([]); return; } const ingredientOptions = [ 'Rum', 'Mint', 'Sugar', 'Lime', 'Vodka', 'Orange Juice', 'Cranberry Juice' ]; setAutoCompleteOptions(ingredientOptions.filter((option)=>option.toLowerCase().includes(value.toLowerCase()))); }; const handleSuggestionClick = (ingredient)=>{ setIngredients(ingredient); setAutoCompleteOptions([]); }; const handleSubmit = (event)=>{ event.preventDefault(); setSuggestions(premiumSuggestions.concat([ 'Mojito', 'Old Fashioned', 'Margarita' ])); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen py-10 bg-[#f8f5f1]", __source: { fileName: "", lineNumber: 41, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "mb-6 text-4xl font-bold text-[#d63447] font-crimson-text", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, "WillBill’s Obsession"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md p-8 space-y-6 bg-white rounded shadow-lg", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "flex flex-col space-y-4", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "ingredients", className: "text-lg font-semibold text-[#333] font-roboto", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, "Ingredients I have:"), /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "ingredients", id: "ingredients", rows: "5", placeholder: "e.g., Rum, Mint, Sugar, Lime", className: "p-4 text-base text-[#333] border rounded resize-none focus:border-[#d63447] focus:outline-none font-roboto w-full", value: ingredients, onChange: handleInputChange, __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("ul", { className: "absolute left-0 right-0 mt-1 max-h-60 overflow-auto bg-white border border-[#d63447] rounded-md", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }, autoCompleteOptions.map((option, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "px-4 py-2 text-[#333] cursor-pointer hover:bg-[#eee] font-roboto", onMouseDown: ()=>handleSuggestionClick(option), __source: { fileName: "", lineNumber: 60, columnNumber: 17 }, __self: this }, option)))), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full py-3 text-base text-white bg-[#d63447] rounded hover:bg-opacity-90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#d63447] font-roboto", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, "Suggest Cocktails")), suggestions && /*#__PURE__*/ React.createElement("ul", { className: "divide-y divide-[#d63447]", __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this }, suggestions.map((suggestion, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "py-2 text-center text-[#333] font-roboto", __source: { fileName: "", lineNumber: 80, columnNumber: 15 }, __self: this }, suggestion)))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 87, columnNumber: 7 }, __self: this }, ` body { animation: fadeIn 1s ease-in-out; } textarea:focus + ul { display: block; } ul { display: none; } `)); }