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

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

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

type ArticleAudienceFooterProps = {
  onSave: () => void;
  onBack: () => void;
  loading: boolean;
};

const ArticleAudienceFooter = ({
  onSave,
  onBack,
  loading,
}: ArticleAudienceFooterProps) => {
  const { spacing, palette } = useTheme();
  const { t } = useLokaliseTranslation('general');

  return (
    <Stack
      component="footer"
      sx={{
        position: 'sticky',
        bottom: 0,
        zIndex: 2,
        height: spacing(10),
        width: '100%',
        backgroundColor: palette?.new.background.elements.grey,
        justifyContent: 'center',
      }}
    >
      <Stack
        sx={{
          gap: 2,
          p: 2,
          width: '100%',
          maxWidth: 'lg',
          mx: 'auto',
          flexDirection: 'row',
          justifyContent: 'space-between',
          alignItems: 'center',
        }}
      >
        <Button
          variant="tertiary"
          size="large"
          onClick={onBack}
          disabled={loading}
        >
          {t('GO_BACK')}
        </Button>
        <Button
          variant="primary"
          size="large"
          onClick={onSave}
          loading={loading}
          sx={{ ml: 'auto' }}
        >
          {t('save')}
        </Button>
      </Stack>
    </Stack>
  );
};

export default ArticleAudienceFooter;