import { Box, Button, Dialog, DialogContent, Stack, Typography } from '@mui/material';
import { alpha } from '@mui/material/styles';
import PauseCircleOutlineIcon from '@mui/icons-material/PauseCircleOutline';
import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';

export default function ServiceSuspendedDialog({ open, onClose }: { open: boolean; onClose: () => void }) {
  const { t } = useLocaleContext();

  return (
    <Dialog
      open={open}
      onClose={onClose}
      slotProps={{
        paper: {
          sx: {
            borderRadius: 3,
            maxWidth: 400,
            mx: 'auto',
            overflow: 'hidden',
          },
        },
      }}>
      <DialogContent sx={{ p: 0 }}>
        <Stack alignItems="center" sx={{ pt: 4, pb: 3, px: 4, textAlign: 'center' }}>
          <Box
            sx={{
              width: 64,
              height: 64,
              borderRadius: '50%',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              bgcolor: (theme) => alpha(theme.palette.warning.main, 0.1),
              mb: 2.5,
            }}>
            <PauseCircleOutlineIcon sx={{ fontSize: 36, color: 'warning.main' }} />
          </Box>

          <Typography sx={{ fontWeight: 700, fontSize: 18, mb: 1, color: 'text.primary' }}>
            {t('payment.checkout.stopAcceptingOrders.title')}
          </Typography>

          <Typography sx={{ color: 'text.secondary', fontSize: 14, lineHeight: 1.6 }}>
            {t('payment.checkout.stopAcceptingOrders.description')}
          </Typography>
        </Stack>

        <Box sx={{ px: 4, pb: 3 }}>
          <Button
            fullWidth
            variant="contained"
            disableElevation
            onClick={onClose}
            sx={{
              borderRadius: 2,
              textTransform: 'none',
              fontWeight: 600,
              py: 1,
            }}>
            {t('common.know')}
          </Button>
        </Box>
      </DialogContent>
    </Dialog>
  );
}