import { type FC } from 'react';

import Container from '@material-hu/mui/Container';
import Stack from '@material-hu/mui/Stack';

import Button from '@material-hu/components/design-system/Buttons/Button';

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

import { FOOTER_HEIGHT } from './RegularFormCompletion';

export type FooterProps = {
  onNextSection: () => void;
  onGoBackSection: () => void;
  isBackSectionDisabled: boolean;
  isNextSectionDisabled: boolean;
  isLoading?: boolean;
};

const Footer: FC<FooterProps> = ({
  onNextSection,
  onGoBackSection,
  isBackSectionDisabled,
  isNextSectionDisabled,
  isLoading = false,
}) => {
  const { t } = useLokaliseTranslation('service_management');

  return (
    <Stack
      sx={{
        flexShrink: 0,
        width: 1,
        backgroundColor: ({ palette }) =>
          palette.new.background.layout.tertiary,
        borderRadius: 0,
        height: FOOTER_HEIGHT,
      }}
    >
      <Container
        maxWidth="md"
        sx={{
          display: 'flex',
          height: 1,
          alignItems: 'center',
          p: '0 !important',
        }}
      >
        <Stack
          sx={{
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'space-between',
            width: 1,
            px: 1,
            gap: 1,
          }}
        >
          <Button
            variant="tertiary"
            size="large"
            onClick={onGoBackSection}
            disabled={isBackSectionDisabled}
          >
            {t('general:back')}
          </Button>
          <Button
            variant="primary"
            size="large"
            onClick={onNextSection}
            loading={isLoading}
            disabled={isNextSectionDisabled}
          >
            {t('continue')}
          </Button>
        </Stack>
      </Container>
    </Stack>
  );
};

export default Footer;
