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

import { AccountcliProject } from '../../../apiClient/services/devops/interface'

const { Title } = Typography

export const BasicInfo: React.FC<
  React.PropsWithChildren<{ project: AccountcliProject }>
> = ({ project }) => {
  return (
    <Card title={<Title level={4}>{project.name}</Title>} bordered={false}>
      <Descriptions>
        <Descriptions.Item label="ID">{project.id}</Descriptions.Item>
        <Descriptions.Item label="Status">{project.status}</Descriptions.Item>
        <Descriptions.Item label="Created At">
          {dayjs((project.created_at?.seconds || 0) * 1000).format(
            'YYYY-MM-DD HH:mm:ss'
          )}
        </Descriptions.Item>
        <Descriptions.Item label="Cross Account">
          {project.is_cross_account?.toString()}
        </Descriptions.Item>
        <Descriptions.Item label="CMEK">
          {project.aws_cmek_enabled?.toString()}
        </Descriptions.Item>
      </Descriptions>
    </Card>
  )
}