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

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: FC<ConfigurationSectionProps> = props => {
  const { titleKey, title, renderContent, gap = 0 } = props;
  const { t } = useTranslation(['group']);

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

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

export default ConfigurationSection;