import React from 'react'

import { Group, Skeleton } from '@tidbcloud/uikit'

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

type StmtSummaryProps = {
  stmt?: StatementModel
  plansCount: number
  loading: boolean
}

export const StmtSummary: React.FC<
  React.PropsWithChildren<StmtSummaryProps>
> = ({ stmt, plansCount, loading }) => {
  if (loading) {
    return (
      <Group gap='xs'>
        <Skeleton height={10} />
        <Skeleton height={10} />
        <Skeleton height={10} width='70%' />
      </Group>
    )
  }

  if (!stmt) {
    return null
  }

  return (
    <>
      <StmtSQL sql={stmt.digest_text!} title='Statement Template' />
      <StmtBasic stmt={stmt} plansCount={plansCount} />
    </>
  )
}