import React from 'react';

import Stack, { type StackProps } from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';

const FieldContainer = React.forwardRef<HTMLDivElement, StackProps<'div'>>(
  ({ children, ...props }, ref) => {
    const theme = useTheme();
    return (
      <Stack
        ref={ref}
        {...props}
        sx={{
          p: 2,
          backgroundColor: theme.palette.new.background.layout.default,
          borderRadius: theme.shape.borderRadiusL,
          gap: 2,
          ...props.sx,
        }}
      >
        {children}
      </Stack>
    );
  },
);

FieldContainer.displayName = 'FieldContainer';

export default FieldContainer;