import React from 'react'

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

import { eventTracking } from '~/utils/telemetry'

export const ExecutionPlan: React.FC<{ data: string }> = ({ data }) => (
  <Card shadow='none' p='xl'>
    <Stack gap='xs'>
      <Title order={5}>Execution Plan</Title>
      <CodeBlock
        codeRender={(content) => <pre>{content}</pre>}
        foldProps={{
          persistenceKey: 'clinic.statement-v2.detail.execution-plan',
          iconVisible: true,
          onIconClick: () =>
            eventTracking('Statement V2 Detail Execution Plan Expand Clicked')
        }}
        onCopyClick={() =>
          eventTracking('Statement V2 Detail Execution Plan Copy Clicked')
        }
      >
        {data}
      </CodeBlock>
    </Stack>
  </Card>
)