import React, { ReactNode, useEffect } from 'react';

import { Flex, FlexProps } from '@chakra-ui/react';
import { useLocation } from 'react-router-dom';

import { PageLayout } from '@/components/Layout/PageLayout';
import { colors } from '@/theme/foundations/colors';
import { useColorModeValue } from '@/components/ui/color-mode';

export type LayoutProps = FlexProps & {
  children: ReactNode;
};

export const PageLayoutInfoCenter = ({
  children,
  width = '25%',
  ...rest
}: LayoutProps) => {
  const { pathname } = useLocation();

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);

  return (
    <PageLayout>
      <Flex
        direction="column"
        margin="auto"
        minWidth={width}
        border="back.900"
        borderWidth="1px"
        borderRadius="8px"
        padding="10px"
        boxShadow={'0px 0px 16px ' + colors.back[900]}
        backgroundColor={useColorModeValue('#FFFFFF', '#000000')}
        {...rest}
      >
        {children}
      </Flex>
    </PageLayout>
  );
};