'use client';

import React from 'react';
import styled from 'styled-components';
import Sidebar from './Sidebar';
import { SidebarProvider, useSidebar } from '@/lib/SidebarContext';

const LayoutRoot = styled.div`
  display: flex;
  min-height: 100vh;
  background: #0d1117;
`;

const MainContent = styled.main<{ $collapsed: boolean }>`
  flex: 1;
  margin-left: ${({ $collapsed }) => ($collapsed ? '60px' : '220px')};
  min-height: 100vh;
  transition: margin-left 0.2s ease;
`;

function Inner({ children }: { children: React.ReactNode }) {
  const { collapsed } = useSidebar();
  return (
    <LayoutRoot>
      <Sidebar />
      <MainContent $collapsed={collapsed}>{children}</MainContent>
    </LayoutRoot>
  );
}

export default function LayoutShell({ children }: { children: React.ReactNode }) {
  return (
    <SidebarProvider>
      <Inner>{children}</Inner>
    </SidebarProvider>
  );
}