import { Alert, AlertProps } from '@tidbcloud/uikit'
import { IconInfoCircle } from '@tidbcloud/uikit/icons'
import { useState } from 'react'

import { config } from 'config'

export const TIDBS_NEW_DEDICATED_CREATION_SOURCE = 'tidbs-new-dedicated-cluster-creation'

export const DedicatedCreationAlert = ({ ...props }: AlertProps) => {
  const [visible, setVisible] = useState(true)
  if (!visible) {
    return null
  }

  return (
    <Alert
      color="peacock"
      icon={<IconInfoCircle size={14} />}
      sx={{ padding: '10px 12px' }}
      withCloseButton={true}
      mx={24}
      mb={16}
      onClose={() => {
        setVisible(false)
        props?.onClose?.()
      }}
      {...props}
    >
      Creating Dedicated cluster typically takes about 30 minutes. If it takes much longer, please{' '}
      <a
        href={config.CREATE_TICKET_URL}
        target="_blank"
        rel="noreferrer"
        data-mp-event="Cluster List Dedicated Cluster Creation Contact Us Link Clicked"
      >
        contact us
      </a>
      . Billing starts once the cluster is created. If you no longer need the cluster, you can delete it in time to stop
      charges.
    </Alert>
  )
}