import { Box, Button, Divider, Flex } from '@tidbcloud/uikit'

import S3Storage from './S3Storage'

interface StoreInTiDBCloudConfigProps {
  btnText?: string
  loading?: boolean
  enableHandler: () => void
  onCancel: () => void
}

export const StoreInTiDBCloudConfig = ({ btnText, loading, onCancel, enableHandler }: StoreInTiDBCloudConfigProps) => {
  return (
    <Box>
      <S3Storage />

      <Divider mx="-xl" my={16} />
      <Flex align="center" justify="flex-end">
        <Button variant="default" onClick={onCancel}>
          Cancel
        </Button>
        <Button
          ml={16}
          type="submit"
          loading={loading}
          data-mp-event="DB Audit Logging Enable Button Clicked"
          data-mp-source="Store in TiDB"
          onClick={enableHandler}
        >
          {btnText ?? 'Next'}
        </Button>
      </Flex>
    </Box>
  )
}

export default StoreInTiDBCloudConfig