import React, { ReactNode } from 'react';
import { Box, Cell } from '@wix/design-system';
import { useIsMobile } from '../../hooks/useIsMobile';

export interface FormPageMainContentProps {
  /**
   * Applies a data-hook HTML attribute that can be used in tests
   */
  dataHook?: string;
  children?: ReactNode;
}

export function FormPageMainContent(props: FormPageMainContentProps) {
  const { children, ...rest } = props;
  const isMobile = useIsMobile();

  return (
    <Cell span={isMobile ? 12 : undefined} {...rest}>
      <Box direction="vertical" gap={isMobile ? 'SP2' : 'SP4'}>
        {children}
      </Box>
    </Cell>
  );
}

FormPageMainContent.displayName = 'FormPageMainContent';