function VideoPlayer({ videoId, title, description }) { return /*#__PURE__*/ React.createElement("div", { className: "max-w-3xl mx-auto p-4", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "aspect-w-16 aspect-h-9 mb-4", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("iframe", { className: "w-full h-full rounded-lg", src: `https://www.youtube.com/embed/${videoId}`, allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true, __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-2 font-roboto", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }, title), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 font-roboto", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }, description)); } function VideoPlayerStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 20, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(VideoPlayer, { videoId: "dQw4w9WgXcQ", title: "Never Gonna Give You Up", description: "The classic music video from Rick Astley's hit song from 1987.", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this })); } function MoodSelector({ onMoodSelect, selectedMood }) { const moods = [ { emoji: "😊", label: "Happy" }, { emoji: "😢", label: "Sad" }, { emoji: "⚡", label: "Energetic" }, { emoji: "😌", label: "Relaxed" }, { emoji: "💪", label: "Motivated" } ]; return /*#__PURE__*/ React.createElement("div", { className: "p-6 max-w-md mx-auto", __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-roboto mb-4 text-center", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }, "How are you feeling today?"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 md:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, moods.map((mood)=>/*#__PURE__*/ React.createElement("button", { key: mood.label, onClick: ()=>onMoodSelect?.(mood.label), className: `p-4 rounded-lg flex flex-col items-center transition-all hover:scale-105 ${selectedMood === mood.label ? "bg-[#e0e7ff] border-2 border-[#6366f1]" : "bg-white border-2 border-gray-200 hover:border-[#6366f1]"}`, __source: { fileName: "", lineNumber: 17, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-4xl mb-2", __source: { fileName: "", lineNumber: 26, columnNumber: 13 }, __self: this }, mood.emoji), /*#__PURE__*/ React.createElement("span", { className: "font-roboto", __source: { fileName: "", lineNumber: 27, columnNumber: 13 }, __self: this }, mood.label))))); } function MoodSelectorStory() { const [mood, setMood] = useState(""); return /*#__PURE__*/ React.createElement("div", { className: "bg-gray-50 min-h-screen p-4", __source: { fileName: "", lineNumber: 39, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MoodSelector, { onMoodSelect: setMood, selectedMood: mood, __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this })); } function MainComponent() { const [moodDescription, setMoodDescription] = useState(""); const [currentVideo, setCurrentVideo] = useState({ videoId: "dQw4w9WgXcQ", title: "Select a mood to get video suggestions", description: "Your personalized video will appear here" }); const handleMoodSubmit = async ()=>{ const chatGPT = await import("chatgpt"); const response = await chatGPT.complete(`Based on the mood: ${moodDescription}, suggest a popular YouTube video. Return only in this format: videoId|title|description`); const [videoId, title, description] = response.split("|"); setCurrentVideo({ videoId, title, description }); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-b from-[#f0f4ff] to-[#e9f0ff] p-4", __source: { fileName: "", lineNumber: 20, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "text-center mb-8 pt-8", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl md:text-5xl font-bold font-roboto text-[#2d3748] mb-4", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, "Welcome to MoodTube 🎵"), /*#__PURE__*/ React.createElement("p", { className: "text-xl text-[#4a5568] font-roboto", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, "Find the perfect video for your mood")), /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto space-y-8", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(React.Fragment, null), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg p-6 shadow-lg", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Describe your mood in more detail...", value: moodDescription, onChange: (e)=>setMoodDescription(e.target.value), className: "w-full p-3 border border-gray-300 rounded-lg font-roboto", name: "mood-description", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleMoodSubmit, className: "mt-4 bg-[#4a90e2] hover:bg-[#357abd] text-white font-roboto py-2 px-6 rounded-lg transition-colors", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, "Get Video Suggestions")), /*#__PURE__*/ React.createElement(VideoPlayer, { videoId: currentVideo.videoId, title: currentVideo.title, description: currentVideo.description, __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }))); }