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

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} />
    </>
  )
}