// src/App.jsx
import { useEffect, useState } from 'react';
import './App.css';
import SectionGrid from './components/SectionGrid';
import AddAppModal from './components/AddAppModal';
import Clock from './components/Clock';


function App() {
  const [sections, setSections] = useState([]);

  const fetchSections = () => {
    fetch('/apps')
      .then(res => res.json())
      .then(data => setSections(data.sections || []));
  };

  useEffect(() => {
    fetchSections();
  }, []);

  return (
    <div className="App">
      <Clock />
      <h1 className="main-title">
        <img src="/navix-logo.svg" alt="Navix logo" className="navix-logo" />
        Navix
      </h1>
      <AddAppModal onAdded={() => window.location.reload()} />
      {sections.map((section) => (
        <SectionGrid key={section.name} section={section} />
      ))}
    </div>
  );
}

export default App;