import React, { ReactNode } from 'react';
import { Box, Cell, Page } 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;
  /**
   * Makes the additional content sticky when scrolling
   */
  sticky?: boolean;
}

export function FormPageAdditionalContent(
  props: FormPageAdditionalContentProps,
) {
  const isMobile = useIsMobile();
  const { children, sticky, ...rest } = props;

  const content = (
    <Box direction="vertical" gap={isMobile ? 'SP2' : 'SP4'}>
      {children}
    </Box>
  );

  const wrappedContent =
    sticky && !isMobile ? <Page.Sticky>{content}</Page.Sticky> : content;

  return (
    <Cell span={isMobile ? 12 : 4} {...rest}>
      {wrappedContent}
    </Cell>
  );
}

FormPageAdditionalContent.displayName = 'FormPageAdditionalContent';