import { Button, Divider, Group, Modal, Typography } from '@tidbcloud/uikit'

import { CloudProviderLabelConst } from 'dbaas/features/Project'

type SwitchGenModalProps = {
  opened: boolean
  switchingProvider: string
  onConfirm: (provider: string) => void
  onCancel: () => void
}

export const SwitchGenModal = ({ opened, switchingProvider, onConfirm, onCancel }: SwitchGenModalProps) => {
  return (
    <Modal title="Change cloud provider" size={580} opened={opened} onClose={() => onCancel()}>
      <Typography variant="body-md">
        Changing your cloud provider requires reconfiguring your cluster from the beginning.
      </Typography>
      <Typography variant="body-md">
        Are you sure you want to switch your cloud provider to '{CloudProviderLabelConst[switchingProvider]}'?
      </Typography>
      <Divider my="lg" />
      <Group justify="end" mt="lg">
        <Button onClick={() => onCancel()} variant="default">
          Cancel
        </Button>
        <Button onClick={() => onConfirm(switchingProvider)}>Confirm</Button>
      </Group>
    </Modal>
  )
}