import { FC } from 'react';

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

import { useLokaliseTranslation } from 'src/utils/i18n';

export type FormHeaderProps = {
  title?: string;
  description?: string;
  hasMandatory?: boolean;
  isLastStepPreSubmit?: boolean;
  isAnonymous?: boolean;
};

const FormHeader: FC<FormHeaderProps> = ({
  title,
  description,
  hasMandatory,
  isLastStepPreSubmit = false,
  isAnonymous = false,
}) => {
  const { t } = useLokaliseTranslation('forms');

  return (
    <Stack alignItems={isLastStepPreSubmit ? 'center' : 'flex-start'}>
      {isAnonymous && (
        <Typography
          sx={{ mb: 2 }}
          variant="body2"
          color="secondary"
        >
          <Box
            component="span"
            sx={{ mr: 1 }}
          >
            🤫
          </Box>
          {t('anonymous_answer')}
        </Typography>
      )}
      <Typography
        color="textPrimary"
        variant="h6"
      >
        {title}
      </Typography>
      <Typography color="textSecondary">
        {isLastStepPreSubmit ? t('SEND_FORM_TO_FINISH') : description}
      </Typography>
      {hasMandatory && (
        <Typography
          color="textPrimary"
          sx={{ color: 'red', fontSize: '12px', mt: 1 }}
        >
          {t('MANDATORY_LABEL')}
        </Typography>
      )}
    </Stack>
  );
};

export default FormHeader;