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

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

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

type NewGoalFooterProps = {
  disabled: boolean;
  onSave: () => void;
};

function NewGoalFooter({ disabled, onSave }: NewGoalFooterProps) {
  const { t } = useLokaliseTranslation('goals');

  return (
    <Stack
      sx={{
        width: '100%',
        mt: 3,
        backgroundColor: 'new.background.layout.tertiary',
        p: 2,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      <Button
        size="large"
        variant="contained"
        onClick={onSave}
        disabled={disabled}
      >
        {t('general:save')}
      </Button>
    </Stack>
  );
}

export default NewGoalFooter;
