import React from 'react'; 
import { Box } from '@/atoms/box';
import type { FlexProps } from '@/atoms/flex';
import { Flex } from '@/atoms/flex';
import { Grid } from '@/atoms/grid';
import { Separator } from '@/atoms/separator';

interface ReviewQuestionLayoutProps {
  Header: React.ReactNode;
  Body: React.ReactNode;
  Footer: React.ReactNode;
}

function AlignCenter(props: FlexProps): React.ReactNode {
  return (
    <Flex
      align="center"
      height="100%"
      justify="center"
      width="100%"
      {...props}
    />
  );
}

function ReviewQuestionLayout({
  Header,
  Body,
  Footer,
}: ReviewQuestionLayoutProps): React.ReactNode {
  return (
    <Grid
      align="center"
      columns="1fr"
      height="100%"
      justify="center"
      rows={{
        initial: '92px 1px 1fr 1px 56px',
        md: '112px 1px 1fr 1px 56px',
      }}
      width="100%"
    >
      <AlignCenter pb="3" pt="4" px="4">
        <Box maxWidth="650px" width="100%">
          {Header}
        </Box>
      </AlignCenter>

      <Separator size="4" />
      <AlignCenter
        p="3"
        style={{ backgroundColor: 'var(--gray-2)', zIndex: 0 }}
      >
        <Box height="100%" maxWidth="650px" width="100%">
          {Body}
        </Box>
      </AlignCenter>
      <Separator size="4" />

      <AlignCenter px="4" py="3">
        <Box maxWidth="650px" width="100%">
          {Footer}
        </Box>
      </AlignCenter>
    </Grid>
  );
}

export default ReviewQuestionLayout;
