import { Button, Stack, Typography } from '@tidbcloud/uikit'

import PauseClusterSVG from 'media/pause-cluster.svg?react'

export const ClusterPausing = () => {
  return (
    <Stack justify="center" align="center" gap="lg" h="100%">
      <PauseClusterSVG />
      <Typography variant="body-lg" ta="center">
        The cluster is pausing.
        <br />
        Once it is paused, you can resume it by clicking the Resume button.
      </Typography>
      <Button variant="outline" disabled data-mp-event="mp-resume-1691461013307">
        Resume
      </Button>
    </Stack>
  )
}