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

import PauseOrResumeCluster from 'dbaas/screens/Cluster/PauseOrResumeCluster'
import PauseClusterSVG from 'media/pause-cluster.svg?react'

export interface PauseClusterProps {
  /**
   * Cluster ID
   */
  id: string
}

/**
 * @deprecated Don't use it anymore. Use PausedStatus instead
 */
export default function PauseCluster({ id }: PauseClusterProps) {
  return (
    <Stack justify="center" align="center" gap="lg" h="100%">
      <PauseClusterSVG />
      <Typography variant="body-lg">The cluster is paused.</Typography>
      <PauseOrResumeCluster
        id={id}
        trigger={
          <Button variant="default" data-mp-event="mp-resume-1691461013287">
            Resume
          </Button>
        }
      />
    </Stack>
  )
}