'use client';

import React from 'react';
import styled from 'styled-components';
import Sidebar from './Sidebar';

const LayoutRoot = styled.div`
  display: flex;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  min-height: 100vh;
`;

const MainContent = styled.main`
  flex-grow: 1;
  padding: var(--space-xl) var(--space-xxl);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  min-width: 0;

  @media (max-width: 767px) {
    padding: var(--space-lg) var(--space-md);
    padding-bottom: 72px;
    gap: var(--space-lg);
  }

  @media (min-width: 768px) and (max-width: 1199px) {
    padding: var(--space-xl) var(--space-xl);
  }
`;

export default function LayoutShell({ children }: { children: React.ReactNode }) {
  return (
    <LayoutRoot>
      <Sidebar />
      <MainContent>{children}</MainContent>
    </LayoutRoot>
  );
}