import { styled } from '../Theme';

export default function Center({
  children = null,
  relative = 'screen',
}: {
  children?: React.ReactNode;
  /**
   * 容器相对尺寸，默认相对屏幕(screen)，可设置为父容器(parent)
   */
  relative?: 'screen' | 'parent';
}) {
  let style = {};

  if (relative === 'parent') {
    style = {
      width: '100%',
      height: '100%',
    };
  }

  return <Div style={style}>{children}</Div>;
}

const Div = styled('div')`
  flex: 1;
  width: 100vw;
  height: 100vh;

  display: flex;
  justify-content: center;
  align-items: center;
`;
