"use client";

import { useState } from "react";
import Providers from "@/components/Providers";
import Sidebar from "@/components/Sidebar";
import { DictionaryProvider } from "@/components/DictionaryContext";

export default function DashboardLayout({
  children,
  dict,
  lang,
}: {
  children: React.ReactNode;
  dict: any;
  lang: string;
}) {
  const [isSidebarOpen, setIsSidebarOpen] = useState(false);

  return (
    <Providers>
      <DictionaryProvider dictionary={dict}>
        <div className={`app-layout ${isSidebarOpen ? "sidebar-open" : ""}`}>
          {/* Mobile Overlay */}
          <div 
            className="sidebar-overlay" 
            onClick={() => setIsSidebarOpen(false)}
          />
          
          <Sidebar 
            dict={dict} 
            lang={lang} 
            onClose={() => setIsSidebarOpen(false)} 
          />
          
          <div className="main-content">
            {/* Mobile Header */}
            <header className="mobile-header">
              <button 
                className="mobile-menu-btn" 
                onClick={() => setIsSidebarOpen(true)}
              >
                <MenuIcon />
              </button>
              <div className="mobile-logo">AyrisMail</div>
            </header>
            
            {children}
          </div>
        </div>
      </DictionaryProvider>
    </Providers>
  );
}

function MenuIcon() {
  return (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <line x1="4" x2="20" y1="12" y2="12" />
      <line x1="4" x2="20" y1="6" y2="6" />
      <line x1="4" x2="20" y1="18" y2="18" />
    </svg>
  );
}