// App.jsx
import React, { useState } from 'react';
import RoutineManager from './components/RoutineManager';
import NewsBanner from './components/NewsBanner';
import Settings from './components/Settings';

function NavItem({ icon, label, view, currentView, setView }) {
  return (
    <div
      className={`nav-item ${currentView === view ? 'active' : ''}`}
      onClick={() => setView(view)}
    >
      <span className="nav-icon">{icon}</span>
      <span className="nav-label">{label}</span>
    </div>
  );
}

function Dashboard() {
  return (
    <div className="dashboard">
      <NewsBanner />
      <div className="dashboard-content">
        <h2>Welcome to CarePlan Pro</h2>
        <p>Your care plan dashboard.</p>
        {/* rest of dashboard content */}
      </div>
    </div>
  );
}

function App() {
  const [currentView, setCurrentView] = useState('dashboard');

  const renderView = () => {
    switch (currentView) {
      case 'dashboard':
        return <Dashboard />;
      case 'medications':
        return <div>Medications view</div>;
      case 'appointments':
        return <div>Appointments view</div>;
      case 'tasks':
        return <div>Tasks view</div>;
      case 'routine':
        return <RoutineManager />;
      case 'settings':
        return <Settings />;
      default:
        return <Dashboard />;
    }
  };

  return (
    <div className="app">
      <div className="sidebar">
        <div className="nav-group">
          <div className="nav-title">General</div>
          <NavItem icon="📊" label="Dashboard" view="dashboard" currentView={currentView} setView={setCurrentView} />
        </div>
        <div className="nav-group">
          <div className="nav-title">Therapy</div>
          <NavItem icon="💊" label="Medications" view="medications" currentView={currentView} setView={setCurrentView} />
          <NavItem icon="📅" label="Appointments" view="appointments" currentView={currentView} setView={setCurrentView} />
          <NavItem icon="✅" label="Tasks" view="tasks" currentView={currentView} setView={setCurrentView} />
          <NavItem icon="🔄" label="Routine" view="routine" currentView={currentView} setView={setCurrentView} />
        </div>
        <div className="nav-group">
          <NavItem icon="⚙️" label="Settings" view="settings" currentView={currentView} setView={setCurrentView} />
        </div>
      </div>
      <div className="main-content">
        {renderView()}
      </div>
    </div>
  );
}

export default App;