import { useEffect } from 'react'
import ProjectList from './components/Projects/ProjectList'
import MainCalendar from './components/Calendar/MainCalendar'
import FocusDrawer from './components/FocusView/FocusDrawer'
import { fetchProjects } from './api/projects'
import useProjectStore from './store/useProjectStore'

export default function App() {
  const { setProjects, setLoading } = useProjectStore()

  useEffect(() => {
    setLoading(true)
    fetchProjects()
      .then(data => { setProjects(data); setLoading(false) })
      .catch(() => setLoading(false))
  }, [])

  return (
    <div className="flex h-screen bg-surface overflow-hidden">
      <aside className="w-72 flex-shrink-0 bg-surface-raised border-r border-surface-border flex flex-col h-full">
        <ProjectList />
      </aside>
      <main className="flex-1 overflow-hidden">
        <MainCalendar />
      </main>
      <FocusDrawer />
    </div>
  )
}