import React from 'react';
import styled from 'styled-components';

import type { JSX } from 'react';

import { breakpoints } from '@redocly/theme/core/utils';
import { CONTENT_ID } from '@redocly/theme/core/constants';

interface PageLayoutProps {
  sidebar?: React.ReactNode;
}

export function PageLayout({
  sidebar,
  children,
}: React.PropsWithChildren<PageLayoutProps>): JSX.Element {
  return (
    <Container data-component-name="Layout/PageLayout">
      {sidebar}
      <ContentContainer id={CONTENT_ID} tabIndex={0}>
        {children}
      </ContentContainer>
    </Container>
  );
}

const Container = styled.div`
  display: flex;
  flex-direction: row;
  min-height: calc(100vh - var(--navbar-height) - var(--banner-height));

  @media screen and (min-width: ${breakpoints.max}) {
    max-width: var(--container-max-width);
    margin-left: auto;
    margin-right: auto;
  }
`;

const ContentContainer = styled.div`
  flex: 1 0 0;
  /*
    flex-basis is ignored for nested flex in Chrome, need to set width
    See more here: https://stackoverflow.com/a/34355447
  */
  width: 0;
  max-width: 100%;
`;