import { Alert, Box, Stack } from '@tidbcloud/uikit'
import { IconAlertCircle } from '@tidbcloud/uikit/icons'

import { CodeWithAction } from '../components/CodeWithAction'
import { PropertyItem } from '../components/PropertyItem'
import { APIKeyItem } from '../helpers'
import { mpEvents } from '../tracker'

interface ResultProps {
  data?: APIKeyItem
}

const Result: React.FC<React.PropsWithChildren<ResultProps>> = ({ data }) => {
  if (!data) {
    return <Box component="p">Something wrong, please try again later.</Box>
  }

  return (
    <Stack>
      <PropertyItem label="Public Key" align="center">
        <CodeWithAction copyIconProps={{ 'data-mp-event': mpEvents.copyPublicKey }}>{data.public_key}</CodeWithAction>
      </PropertyItem>
      <PropertyItem label="Private Key" align="center">
        <CodeWithAction copyIconProps={{ 'data-mp-event': mpEvents.copyPrivateKey }}>{data.private_key}</CodeWithAction>
      </PropertyItem>
      <Alert icon={<IconAlertCircle size={14} color="inherit" />}>
        Copy your private key and store it in a secure location. After you leave this dialog, the full private key is
        unavailable.
      </Alert>
    </Stack>
  )
}

export default Result