import styled from '@emotion/styled';
import { ReactNode } from 'react';
import ContentLayout from '~/components/layouts/content_layout';
import LegalFooter from '~/components/legal/legal_footer';

const LegalContentStyle = styled(ContentLayout)({
  main: {
    'h1, p': {
      marginTop: '0.5em',
    },
    h2: {
      marginTop: '1.5em',
    },
    h3: {
      marginTop: '1em',
    },
    ul: {
      marginLeft: '2em',
    },
  },
});

const LegalContentLayout = ({
  children,
  className,
}: {
  children: ReactNode;
  className?: string;
}) => (
  <LegalContentStyle className={className}>
    {children}
    <LegalFooter />
  </LegalContentStyle>
);

export default LegalContentLayout;
