import { Card, Descriptions, Typography } from 'antd'

import { K8supgradeK8sInfo } from 'apiClient/services/devops/interface'

const { Title } = Typography

export const BasicInfo: React.FC<
  React.PropsWithChildren<{ k8s: K8supgradeK8sInfo }>
> = ({ k8s }) => {
  return (
    <Card title={<Title level={4}>K8S Cluster Detail</Title>} bordered={false}>
      <Descriptions>
        <Descriptions.Item label="Name">{k8s.k8s_name}</Descriptions.Item>
      </Descriptions>
      <Descriptions>
        <Descriptions.Item label="Tenant ID">{k8s.tenant_id}</Descriptions.Item>
        <Descriptions.Item label="Project ID">
          {k8s.project_id}
        </Descriptions.Item>
        <Descriptions.Item label="Region">{k8s.region}</Descriptions.Item>
        <Descriptions.Item label="Control Plane Version">
          {k8s.control_plane_version?.major}.{k8s.control_plane_version?.minor}
        </Descriptions.Item>
        {k8s.admin_nodes ? (
          <Descriptions.Item label="Admin Node Version">
            {k8s.admin_nodes[0].version?.major}.
            {k8s.admin_nodes[0].version?.minor}
          </Descriptions.Item>
        ) : (
          <Descriptions.Item label="Admin Node Version">-</Descriptions.Item>
        )}
        <Descriptions.Item label="Cloud Provider">
          {k8s.cloud_provider}
        </Descriptions.Item>
        <Descriptions.Item label="Cloud Account">
          {k8s.cloud_account}
        </Descriptions.Item>
      </Descriptions>
    </Card>
  )
}