import * as React from 'react';

export interface RootProps extends React.HTMLProps<HTMLDivElement> {
  sidebarBaseWidget?: React.ReactNode;
  topBarWidget?: React.ReactNode;
}

export const Root = React.forwardRef<HTMLDivElement, RootProps>(({
  children,
  topBarWidget,
  sidebarBaseWidget,
  ...etcProps
}, ref) => (
  <>
    {topBarWidget}
    <div
      {...etcProps}
      ref={ref}
			data-viewfinder="main"
      className="box-border md:pr-[calc(50%-(var(--base-width)*0.5))]"
    >
      {children}
    </div>
    {sidebarBaseWidget}
  </>
))

Root.displayName = 'Root';


export interface ContentContainerProps extends React.HTMLProps<HTMLDivElement> {}

export const MainContentContainer = React.forwardRef<HTMLDivElement, ContentContainerProps>(({
  children,
}, ref) => (
  <div
    className="px-8 box-border w-full max-w-[calc(var(--base-width)*2)] mx-auto md:mr-0"
    ref={ref}
  >
    {children}
  </div>
));

MainContentContainer.displayName = 'MainContentContainer';

export interface SidebarMainContainerProps extends React.HTMLProps<HTMLDivElement> {}

export const SidebarContentContainer = React.forwardRef<HTMLDivElement, SidebarMainContainerProps>(({
  children,
  ...etcProps
}, ref) => (
  <div
    {...etcProps}
    className="px-8 box-border w-full max-w-[calc(var(--base-width)*2)] mx-auto md:ml-0 md:w-[var(--base-width)]"
    ref={ref}
  >
    {children}
  </div>
));

SidebarContentContainer.displayName = 'SidebarMainContainer';