function GenreMoodSelector({ onGenreChange, onMoodChange, selectedGenres = [], selectedMoods = [] }) { const genres = [ "Pop", "Rock", "Hip-Hop", "Jazz", "Electronic" ]; const moods = [ "Happy", "Sad", "Energetic", "Calm", "Romantic" ]; return /*#__PURE__*/ React.createElement("div", { className: "p-6 max-w-md mx-auto bg-white rounded-xl shadow-md space-y-6", __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4 font-roboto", __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }, "Genres"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-3", __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }, genres.map((genre)=>/*#__PURE__*/ React.createElement("label", { key: genre, className: "flex items-center space-x-2 cursor-pointer", __source: { fileName: "", lineNumber: 16, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: `genre-${genre}`, checked: selectedGenres.includes(genre), onChange: (e)=>onGenreChange(genre, e.target.checked), className: "h-4 w-4 text-blue-600 focus:ring-blue-500 rounded", __source: { fileName: "", lineNumber: 20, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-roboto", __source: { fileName: "", lineNumber: 27, columnNumber: 15 }, __self: this }, genre))))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4 font-roboto", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, "Moods"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-3", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, moods.map((mood)=>/*#__PURE__*/ React.createElement("label", { key: mood, className: "flex items-center space-x-2 cursor-pointer", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: `mood-${mood}`, checked: selectedMoods.includes(mood), onChange: (e)=>onMoodChange(mood, e.target.checked), className: "h-4 w-4 text-blue-600 focus:ring-blue-500 rounded", __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-roboto", __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }, mood)))))); } function GenreMoodSelectorStory() { const [selectedGenres, setSelectedGenres] = useState([]); const [selectedMoods, setSelectedMoods] = useState([]); const handleGenreChange = (genre, isChecked)=>{ setSelectedGenres((prev)=>isChecked ? [ ...prev, genre ] : prev.filter((g)=>g !== genre)); }; const handleMoodChange = (mood, isChecked)=>{ setSelectedMoods((prev)=>isChecked ? [ ...prev, mood ] : prev.filter((m)=>m !== mood)); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 74, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(GenreMoodSelector, { selectedGenres: selectedGenres, selectedMoods: selectedMoods, onGenreChange: handleGenreChange, onMoodChange: handleMoodChange, __source: { fileName: "", lineNumber: 75, columnNumber: 7 }, __self: this })); } function SongCard({ artist, title, genre, mood }) { return /*#__PURE__*/ React.createElement("div", { className: "rounded-lg bg-white shadow-md p-6 max-w-sm", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-2 font-roboto", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, title), /*#__PURE__*/ React.createElement("h3", { className: "text-lg text-gray-600 mb-4 font-roboto", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, artist), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-2", __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "px-3 py-1 bg-purple-100 text-purple-800 rounded-full text-sm font-roboto", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, genre), /*#__PURE__*/ React.createElement("span", { className: "px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm font-roboto", __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, mood))); } function SongCardStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-8 space-y-4", __source: { fileName: "", lineNumber: 21, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(SongCard, { artist: "Taylor Swift", title: "Cruel Summer", genre: "Pop", mood: "Energetic", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(SongCard, { artist: "The Weeknd", title: "Blinding Lights", genre: "Synth-pop", mood: "Upbeat", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(SongCard, { artist: "Billie Eilish", title: "everything i wanted", genre: "Alternative", mood: "Melancholic", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this })); } function MainComponent() { const [recommendations, setRecommendations] = useState([]); const [selectedGenres, setSelectedGenres] = useState([]); const [selectedMoods, setSelectedMoods] = useState([]); const [loading, setLoading] = useState(false); const handleGenreChange = (genre, isChecked)=>{ setSelectedGenres((prev)=>isChecked ? [ ...prev, genre ] : prev.filter((g)=>g !== genre)); }; const handleMoodChange = (mood, isChecked)=>{ setSelectedMoods((prev)=>isChecked ? [ ...prev, mood ] : prev.filter((m)=>m !== mood)); }; const fetchRecommendations = async ()=>{ setLoading(true); try { const result = await GetRecommendations({ genres: selectedGenres, moods: selectedMoods }); setRecommendations(result); } catch (error) { console.error(error); } setLoading(false); }; useEffect(()=>{ fetchRecommendations(); }, [ selectedGenres, selectedMoods ]); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#121212] p-6", __source: { fileName: "", lineNumber: 38, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-white mb-8 font-roboto", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, "Recommended Songs"), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(GenreMoodSelector, { selectedGenres: selectedGenres, selectedMoods: selectedMoods, onGenreChange: handleGenreChange, onMoodChange: handleMoodChange, __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this })), loading ? /*#__PURE__*/ React.createElement("div", { className: "text-white text-center", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, "Loading...") : /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, recommendations.map((song, index)=>/*#__PURE__*/ React.createElement(SongCard, { key: index, ...song, __source: { fileName: "", lineNumber: 58, columnNumber: 15 }, __self: this }))))); }