import React from 'react';
import { Box, Text, useViewport } from '@nova-hf/ui';
import { TextProps } from 'frisco';

type StepWrapperProps = {
  id: string;
  children: React.ReactNode;
  isFirstStep?: boolean;
  isJumboTitle?: boolean;
} & TextProps;

// Veit ekki hvernig desktop verður en pælingin er að reyna að láta
// þennan component vera responsible fyrir mest öllu responsive dæminu.

const StepsWrapper = ({
  isFirstStep = false,
  id,
  title,
  subtitle,
  isJumboTitle,
  children,
}: StepWrapperProps) => {
  const { isSmall } = useViewport();

  return (
    <Box
      id={id}
      display="flex"
      flexDirection="column"
      justifyContent={{ sm: 'center' }}
      paddingX={{ sm: 0, md: 4, lg: 1 }}
      style={{ height: '100vh', margin: '0px auto' }}
      {...(!isFirstStep &&
        isSmall && {
          style: {
            height: '100vh',
          },
        })}
      paddingY={{ lg: isFirstStep ? 0 : 20 }}
      width={'100%'}
    >
      <Box marginLeft={1}>
        <Text variant={isJumboTitle ? 'h6' : 'subtitleBold'} paddingBottom={subtitle ? 1 : 3}>
          {title}
        </Text>
        {subtitle && (
          <Text variant="pMediumRegular" color="grey700" marginBottom={2}>
            {subtitle}
          </Text>
        )}
      </Box>
      <Box>{children}</Box>
    </Box>
  );
};

export default StepsWrapper;