"use client"

import { useState, useEffect } from "react"
import { useTheme } from "next-themes"
import Sidebar from "./sidebar"
import type React from "react" // Added import for React

interface LayoutProps {
  children: React.ReactNode
}

export default function Layout({ children }: LayoutProps) {
  const { theme } = useTheme()
  const [mounted, setMounted] = useState(false)

  useEffect(() => setMounted(true), [])

  if (!mounted) return null

  return (
    <div className={`flex h-screen ${theme === "dark" ? "dark" : ""}`}>
      <Sidebar />
      <div className="w-full flex flex-1 flex-col">
        <main className="flex-1 overflow-auto p-6 dark:bg-[#0F0F12]">{children}</main>
      </div>
    </div>
  )
}