import { Modal } from '@tidbcloud/uikit'

import { V1beta2VpcPeeringAllowlistSettingIpAccessList } from 'dbaas/services/api-clients/v2025/tidb-management/v1beta2/interface'

import { AllowedAccessCidrEditor } from './AllowedAccessCidrEditor'

interface AddAllowedAccessCidrModalProps {
  tidbId: string
  cidrList: V1beta2VpcPeeringAllowlistSettingIpAccessList[]
  opened: boolean
  onClose: () => void
  onConfirm: () => void
}

export const AddAllowedAccessCidrModal = ({
  tidbId,
  cidrList,
  opened,
  onClose,
  onConfirm
}: AddAllowedAccessCidrModalProps) => {
  return (
    <Modal
      title={`${cidrList.length ? 'Edit' : 'Add'} CIDR`}
      size={720}
      centered
      opened={opened}
      onClose={onClose}
      styles={{ body: { padding: 0 } }}
      data-testid="allowed-access-cidr-modal"
    >
      <AllowedAccessCidrEditor
        tidbId={tidbId}
        cidrList={cidrList}
        opened={opened}
        onClose={onClose}
        onConfirm={onConfirm}
      />
    </Modal>
  )
}