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

const ConnectPreparationModal = ({
  opened,
  onClose,
  onContinue,
  ipWhitelist
}: {
  opened: boolean
  onClose: () => void
  onContinue: () => void
  ipWhitelist?: string[]
}) => {
  return (
    <Modal opened={opened} size="lg" centered title="Connect Preparation" withCloseButton={false} onClose={onClose}>
      <Stack>
        <p>
          Before testing the connection, add the Data Migration service IP addresses (<b>{ipWhitelist?.join(', ')}</b>)
          to the IP access list of your source database and firewall (if any) so the Data Migration service can access
          your source database.
        </p>

        <Group justify="flex-end">
          <Button variant="default" onClick={onClose} data-mp-event="mp-cancel-1691461017004">
            Cancel
          </Button>
          <Button onClick={onContinue} data-mp-event="mp-alreadydone,continue-1691461017007">
            Already done, continue
          </Button>
        </Group>
      </Stack>
    </Modal>
  )
}

export default ConnectPreparationModal