"use client";

import { useState } from "react";
import { Menu } from "lucide-react";
import { Sidebar } from "@/components/sidebar";
import { cn } from "@/lib/utils";

interface ResponsiveLayoutProps {
  children: React.ReactNode;
  accountName: string;
  userName: string;
}

export function ResponsiveLayout({ children, accountName, userName }: ResponsiveLayoutProps) {
  const [sidebarOpen, setSidebarOpen] = useState(false);

  return (
    <div className="flex h-screen overflow-hidden bg-background">
      {/* Mobile sidebar overlay */}
      {sidebarOpen && (
        <div
          className="fixed inset-0 z-40 bg-black/50 lg:hidden"
          onClick={() => setSidebarOpen(false)}
          aria-hidden="true"
        />
      )}

      {/* Sidebar */}
      <aside
        className={cn(
          "flex h-full w-60 flex-col border-r border-border bg-[#d4e4db] z-50 transition-transform duration-300 ease-in-out lg:translate-x-0",
          sidebarOpen ? "translate-x-0" : "-translate-x-full"
        )}
      >
        <Sidebar
          accountName={accountName}
          userName={userName}
        />
      </aside>

      {/* Main content */}
      <main className="flex-1 overflow-y-auto relative lg:ml-0">
        {/* Mobile header with menu button */}
        <header className="fixed top-0 left-0 right-0 z-30 h-14 bg-background/80 backdrop-blur-sm border-b border-border lg:hidden">
          <div className="flex h-full items-center justify-between px-4">
            <button
              onClick={() => setSidebarOpen(true)}
              className="p-2 rounded-md text-muted-foreground hover:bg-muted"
              aria-label="Open menu"
            >
              <Menu className="h-5 w-5" />
            </button>
            <h1 className="text-lg font-semibold text-foreground">WhatsApp CRM</h1>
            <div className="w-10" />
          </div>
        </header>

        <div className="mx-auto max-w-7xl px-6 py-6 pt-16 sm:pt-6 lg:pt-6">
          {children}
        </div>
      </main>
    </div>
  );
}