import { Card, Stack, Title } from '@tidbcloud/uikit'
import { CodeBlock } from '@tidbcloud/uikit/biz'
import React from 'react'

import { eventTracking } from 'dbaas/utils/tracking'

export const ExecutionPlan: React.FC<React.PropsWithChildren<{ data: string }>> = ({ data }) => {
  return (
    <Card shadow="none" p="xl">
      <Stack gap="xs">
        <Title order={5}>Execution Plan</Title>

        <CodeBlock
          codeRender={(content) => <pre>{content}</pre>}
          foldProps={{
            persistenceKey: 'dbaas.statement.detail.execution-plan',
            iconVisible: true,
            onIconClick: () => eventTracking('Statement Detail Execution Plan Expand Clicked')
          }}
          onCopyClick={() => eventTracking('Statement Detail Execution Plan Copy Clicked')}
        >
          {data}
        </CodeBlock>
      </Stack>
    </Card>
  )
}