/* eslint-disable react/prop-types */
import React from 'react';
import classNames from 'clsx';

import { SubFormGroupContext, useFormGroupSettings } from '../helpers/hooks';

import { Paper, Stack } from '@/mui/components';

import styles from './FormGroup.module.scss';

function FormGroup(props) {
  const groupIntent = useFormGroupSettings();

  return (
    <SubFormGroupContext.Provider value={groupIntent + ((props.intent ?? true) ? 3 : 0)}>
      <Stack
        component={props.component ?? Paper}
        elevation={props.elevation ?? 2}
        fullWidth
        spacing={4}
        className={classNames(styles.Wrapper, props.className)}
      >
        {props.children}
      </Stack>
    </SubFormGroupContext.Provider>
  );
}

export default FormGroup;
