import * as React from "react"
import { SidebarProvider, Sidebar, SidebarContent, SidebarHeader, SidebarFooter, SidebarInset, SidebarTrigger } from "@/components/ui/sidebar"

interface MainLayoutProps {
  children: React.ReactNode
}

export function MainLayout({ children }: MainLayoutProps) {
  return (
    <SidebarProvider>
      <div className="flex min-h-screen w-full">
        <Sidebar role="complementary">
          <SidebarHeader>
            <div className="p-4 font-bold text-xl">EA Chatbot</div>
          </SidebarHeader>
          <SidebarContent>
            {/* Navigation links or conversation history will go here */}
          </SidebarContent>
          <SidebarFooter>
            <div className="p-4 text-xs text-muted-foreground">© 2026 Election Analytics</div>
          </SidebarFooter>
        </Sidebar>
        <SidebarInset className="flex flex-col flex-1">
          <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4" role="navigation">
            <SidebarTrigger />
            <div className="font-semibold">Chat</div>
          </header>
          <main className="flex-1 overflow-auto p-6">
            {children}
          </main>
        </SidebarInset>
      </div>
    </SidebarProvider>
  )
}