import { Flex } from '@tidbcloud/uikit'

import { VectorGithub } from 'dbaas/screens/GettingStarted/Tutorials/Steps'

import { HelpCenterCard } from '../CenterCard'
import { CenterBreadcrumbs } from '../CenterRoute'
import { DEFAULT_HELP_PATH } from '../context'

export const SQL_EDITOR_TOUR_NAME = 'sql_editor_tour'

export const SQL_EDITOR_TOUR_PATH = `${DEFAULT_HELP_PATH}/${SQL_EDITOR_TOUR_NAME}`

export const SQLEditorTour = () => {
  return (
    <Flex direction="column" h="100%">
      <HelpCenterCard.Header>
        <CenterBreadcrumbs
          items={[
            { path: DEFAULT_HELP_PATH, title: 'Help' },
            {
              path: SQL_EDITOR_TOUR_PATH,
              title: 'Vector Search on Github Repos'
            }
          ]}
        />
      </HelpCenterCard.Header>
      <VectorGithub name={SQL_EDITOR_TOUR_NAME} />
    </Flex>
  )
}