import { forwardRef } from 'react';
import { useTranslation } from 'react-i18next';

import Box from '@material-hu/mui/Box';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import CardContainer from '@material-hu/components/design-system/CardContainer';

export type ConfigurationSectionProps = {
  titleKey?: string;
  title?: string;
  renderContent: () => React.ReactNode;
  gap?: number;
};

const ConfigurationSection = forwardRef<
  HTMLDivElement,
  ConfigurationSectionProps
>((props, ref) => {
  const { titleKey, title, renderContent, gap = 0 } = props;
  const { t } = useTranslation(['group']);

  const sectionTitle = titleKey ? t(titleKey) : title;

  return (
    <Box ref={ref}>
      <CardContainer fullWidth>
        <Stack sx={{ gap }}>
          {sectionTitle && (
            <Typography
              variant="globalS"
              fontWeight="fontWeightSemiBold"
            >
              {sectionTitle}
            </Typography>
          )}
          {renderContent()}
        </Stack>
      </CardContainer>
    </Box>
  );
});

ConfigurationSection.displayName = 'ConfigurationSection';

export default ConfigurationSection;