import { Box, Button } from '@mui/material';
import { useTranslation } from 'next-i18next';
import { FC } from 'react';

interface Props {
  handleBackToCart: () => void;
  handleStripePayment: () => void;
}

const ButtonGroup: FC<Props> = ({ handleBackToCart, handleStripePayment }) => {
  const { t } = useTranslation('shipping');
  return (
    <Box
      sx={{
        display: 'flex',
        mb: 2,
        borderRadius: 2,
      }}
    >
      <Button
        variant="contained"
        sx={{
          mt: 3,
          mb: 2,
          height: 50,
          width: 150,
          textTransform: 'none',
          backgroundColor: 'primary.main',
          color: 'white',
          mr: 2,
        }}
        onClick={handleBackToCart}
      >
        {t('shipping:back')}
      </Button>
      <Button
        type="submit"
        variant="contained"
        sx={{
          mt: 3,
          mb: 2,
          backgroundColor: '#CBA213',
          height: 50,
          width: 200,
          textTransform: 'none',
          color: 'white',
        }}
        onClick={handleStripePayment}
      >
        {t('shipping:continue')}
      </Button>
    </Box>
  );
};

export default ButtonGroup;