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

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

export function FormPageAdditionalContent(
  props: FormPageAdditionalContentProps,
) {
  const isMobile = useIsMobile();
  const { children, ...rest } = props;
  return (
    <Cell span={isMobile ? 12 : 4} {...rest}>
      <Box direction="vertical" gap={isMobile ? 'SP2' : 'SP4'}>
        {children}
      </Box>
    </Cell>
  );
}

FormPageAdditionalContent.displayName = 'FormPageAdditionalContent';
