'use client'

import { useState } from 'react'
import Header from './Header'
import Sidebar from './Sidebar'
import DirectoryModal from './DirectoryModal'

interface MainLayoutProps {
  children: React.ReactNode
}

export default function MainLayout({ children }: MainLayoutProps) {
  const [isModalOpen, setIsModalOpen] = useState(false)

  const handleDirectorySave = (directory: string) => {
    console.log('Directory to scan:', directory)
  }

  console.log('Modal state:', isModalOpen)
  return (
    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
      <Header onScanDirectory={() => setIsModalOpen(true)} />
      <div className="flex">
        <Sidebar />
        <main className="flex-1 min-h-screen">
            {children}
        </main>
      </div>
      
      {isModalOpen && (
        <DirectoryModal
          isOpen={isModalOpen}
          onClose={() => setIsModalOpen(false)}
          onSave={handleDirectorySave}
        />
      )}
    </div>
  )
}