'use client'

import { useLanguage } from '@/lib/i18n'
import { SettingsHelpBox } from '@/components/settings/settings-help-box'

export function McpSettingsHeader() {
  const { t } = useLanguage()

  return (
    <SettingsHelpBox
      title={t('mcpSettings.helpBox.title')}
      defaultOpen={true}
      steps={[
        { text: t('mcpSettings.helpBox.step1') },
        { text: t('mcpSettings.helpBox.step2') },
        { text: t('mcpSettings.helpBox.step3') },
        { text: t('mcpSettings.helpBox.step4'), link: { label: t('mcpSettings.helpBox.step4Link'), href: 'https://modelcontextprotocol.io/docs' } },
        { icon: '⚡', text: t('mcpSettings.helpBox.step5') },
      ]}
    />
  )
}
