import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';
import { typographyClasses } from '@material-hu/mui/Typography';

import HuAlert from '@material-hu/components/design-system/Alert';
import HuTitle from '@material-hu/components/design-system/Title';

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

import { CONTENT_WIDTH } from '../../constants';

type SurveyWelcomeProps = {
  title: string;
  description: string;
  hasAlert: boolean;
};

const SurveyWelcome = ({
  title,
  description,
  hasAlert,
}: SurveyWelcomeProps) => {
  const { t } = useLokaliseTranslation('people_experience');
  const theme = useTheme();

  return (
    <Stack
      sx={{
        bgcolor: theme.palette.new.background.elements.inverted,
        py: 5,
        gap: 4,
        alignItems: 'center',
      }}
    >
      <HuTitle
        title={title}
        description={description}
        variant="M"
        sx={{
          [`.${typographyClasses.root}`]: {
            color: theme.palette.new.text.neutral.inverted,
          },
          maxWidth: CONTENT_WIDTH,
        }}
        centered
      />
      {hasAlert && (
        <HuAlert
          description={t('survey.anonymous_alert.description')}
          severity="info"
          title={t('survey.anonymous_alert.title')}
          sx={{ width: '100%', maxWidth: CONTENT_WIDTH }}
          hasClose
        />
      )}
    </Stack>
  );
};

export default SurveyWelcome;
