import ArrowBackIcon from '@mui/icons-material/ArrowBack';
import { Box, Grid, InputLabel, Typography } from '@mui/material';
import { useNavigate } from 'react-router';
import { pxToRem } from '../theme/typography';
import { useStyles } from './styles/formPageHeaderStyles';

function FormPageHeader({
  showGoBack,
  pageTitle,
  isDetailPage,
  handleGoBack,
  wrapHeader = false,
  titleAlignItems,
  showSubHeading = true,
}) {
  const classes = useStyles();
  const navigate = useNavigate();
  return (
    <Grid item md={12}>
      <Box
        className={isDetailPage ? classes.detailPageHeader : classes.header}
        sx={{ flexWrap: wrapHeader ? 'wrap' : undefined }}
      >
        <Box className={classes.headerTitle}>
          {showGoBack && (
            <ArrowBackIcon
              className={classes.gobackIcon}
              onClick={() => {
                handleGoBack ? handleGoBack() : navigate(-1);
              }}
            />
          )}
          <div
            style={{
              display: 'flex',
              alignItems: titleAlignItems ? titleAlignItems : 'center',
            }}
            className={!isDetailPage ? classes.title : null}
          >
            <Typography
              variant="Gilroy-Medium"
              fontSize={pxToRem(24)}
              sx={{ overflowWrap: 'break-word' }}
            >
              {pageTitle}
            </Typography>
          </div>
        </Box>
      </Box>
      {showSubHeading && (
        <Box className={classes.subHeading}>
          <InputLabel>
            To sign up to 24x7 AI Healthcare Receptionist, please fill the
            details below.
          </InputLabel>
        </Box>
      )}
    </Grid>
  );
}

export default FormPageHeader;
