import React from 'react';
import { Typography } from 'antd';
import { Outlet } from 'react-router-dom';
import useRoute from '@/utils/hooks/useRoute';

const containerStyle = {
  // margin: '24px 24px 0 24px',
  // margin: '24px',
  // marginTop: '0px',
  // minHeight: 'calc(100% - 48px)',
  height: '100%',
}
const { Title } = Typography;

export default (props) => {
  const { meta = {} } = useRoute() || {};
  const style = meta.noLayout ? { height: '100%' } : containerStyle;

  return (
    <div style={style}>
      { meta.title && !meta.noLayout && <Title level={4} style={{ paddingBottom: '12px' }}>{ meta.title }</Title> }
      <Outlet />
    </div>
  )
}
