import { Box, FieldGroup } from '@rocket.chat/fuselage';
import { useTranslation } from 'react-i18next';

import { DebugLogging } from './features/DebugLogging';
import { DetailedEventsLogging } from './features/DetailedEventsLogging';
import { VerboseOutlookLogging } from './features/VerboseOutlookLogging';

export const DeveloperTab = () => {
  const { t } = useTranslation();

  return (
    <Box display='flex' justifyContent='center'>
      <FieldGroup is='form' maxWidth={600}>
        <Box fontScale='h4' mbe='x16' color='default'>
          {t('settings.sections.logging')}
        </Box>
        <DebugLogging />
        <VerboseOutlookLogging />
        <DetailedEventsLogging />
      </FieldGroup>
    </Box>
  );
};