import { Box, Card, SimpleGrid, Typography } from '@tidbcloud/uikit'
import React from 'react'

import TimeComponent from 'dbaas/components/TimeComponent'

import { StatementModel } from '../utils/type'

type StmtBasicProps = {
  stmt: StatementModel
  plansCount: number
}

export const StmtBasic: React.FC<React.PropsWithChildren<StmtBasicProps>> = ({ stmt, plansCount }) => {
  return (
    <Card shadow="none" p="xl">
      <SimpleGrid cols={2} spacing="xl">
        <Box>
          <Typography variant="body-lg" c="carbon.7">
            Query Template ID
          </Typography>
          <Typography style={{ wordBreak: 'break-all' }}>{stmt.digest ?? ''}</Typography>
        </Box>
        <Box>
          <Typography variant="body-lg" c="carbon.7">
            Time Range
          </Typography>
          <Typography>
            <TimeComponent time={stmt.summary_begin_time ?? 0} /> ~ <TimeComponent time={stmt.summary_end_time ?? 0} />
          </Typography>
        </Box>
        <Box>
          <Typography variant="body-lg" c="carbon.7">
            Plans Count
          </Typography>
          <Typography>{plansCount}</Typography>
        </Box>
        <Box>
          <Typography variant="body-lg" c="carbon.7">
            Execution Database
          </Typography>
          <Typography>{stmt.schema_name ?? ''}</Typography>
        </Box>
      </SimpleGrid>
    </Card>
  )
}