import React from 'react'

import { Typography } from 'antd'
import { Link } from 'react-router-dom'

import { useParentClusterOrgId } from '~/hooks/use-parent-cluster-org-id'

type ParentClusterLinkProps = {
  parentClusterId: string
  label: string
  /** When false, uses fallbackOrgId directly (e.g. master cluster in the same org). */
  lookupOrgFromDashboard?: boolean
  fallbackOrgId?: string
}

export const ParentClusterLink: React.FC<ParentClusterLinkProps> = ({
  parentClusterId,
  label,
  lookupOrgFromDashboard = false,
  fallbackOrgId
}) => {
  const dashboardOrgId = useParentClusterOrgId(
    lookupOrgFromDashboard ? parentClusterId : undefined
  )
  const parentOrgId = lookupOrgFromDashboard ? dashboardOrgId : fallbackOrgId

  return (
    <Typography.Text type='secondary'>
      {parentOrgId ? (
        <Link
          to={`/orgs/${parentOrgId}/clusters/${parentClusterId}`}
          target='_blank'
        >
          {label}: {parentClusterId}
        </Link>
      ) : (
        <>
          {label}: {parentClusterId}
        </>
      )}
    </Typography.Text>
  )
}