import { Typography } from '@tidbcloud/uikit'

import { getRootClientName } from './helpers'

interface ConnectionClientFooterProps {
  docLink?: string
  /**
   * Root client
   */
  client: string
}

export function ConnectionClientFooter({ docLink, client }: ConnectionClientFooterProps) {
  if (!docLink) {
    return null
  }

  const rootClientName = getRootClientName(client)

  return (
    <Typography variant="body-lg">
      The above codes show how to connect to your instance with {rootClientName}. Learn more about{' '}
      <a href={docLink} target="_blank" rel="noopener noreferrer">
        {rootClientName} connection
      </a>
      .
    </Typography>
  )
}