import React from 'react'

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

import TimeComponent from '../../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>
  )
}