import { Code, Stack, Typography } from '@tidbcloud/uikit'
import { CodeBlock } from '@tidbcloud/uikit/biz'

import { mcpConfig } from '../meta/output'

import { getMcpConfigCodes } from './get-mcp-config-codes'
import { type McpGuideProps } from './guide-types'

export const WindsurfGuide = ({
  host,
  port,
  username,
  password,
  database,
  onSelectionCopy,
  onCopyBtnClick
}: Omit<McpGuideProps, 'oneClickProps'>) => {
  const jsonCodes = getMcpConfigCodes(mcpConfig.windsurf.installMethod.json.codeTemplate, {
    host,
    port,
    username,
    password,
    database
  })

  return (
    <Stack gap="md">
      <Typography variant="body-lg">
        Follow{' '}
        <a
          href={mcpConfig.windsurf.installMethod.json.configLocation.docLink}
          target="_blank"
          rel="noopener noreferrer"
        >
          windsurf's documentation
        </a>{' '}
        to add the configuration to <Code>{mcpConfig.windsurf.installMethod.json.configLocation.fileName}</Code>:
      </Typography>
      <CodeBlock
        language="json"
        codeHighlightProps={{
          onCopy: onSelectionCopy
        }}
        onCopyClick={onCopyBtnClick}
      >
        {jsonCodes}
      </CodeBlock>
    </Stack>
  )
}