'use client'

import dynamic from 'next/dynamic'
import Link from 'next/link'
import { usePathname } from 'next/navigation'

import TelegramCard from '@/components/telegram/TelegramCard'

// BotConfigPanel is heavy and only needed after wallet connect — lazy load it.
const BotConfigPanel = dynamic(() => import('@/components/trades/BotConfigPanel'), {
  ssr: false,
  loading: () => <div style={{ height: 200, background: 'var(--bg-sunk)', borderRadius: 12, marginBottom: 16 }} />,
})

export default function SettingsClient() {
  const pathname = usePathname()
  const locale = pathname.split('/')[1] || 'en'
  const href = (path: string) => `/${locale}${path}`

  return (
    <>
      <div id="bot-config">
        <BotConfigPanel />
      </div>

      <div style={{ marginTop: 8 }}>
        <TelegramCard />
      </div>

      <div className="card" style={{ padding: '14px 20px', marginTop: 8 }}>
        <div style={{ display: 'flex', gap: 20, flexWrap: 'wrap' }}>
          <Link href={href('/privacy')} style={{ fontSize: 13, color: 'var(--ink-3)', textDecoration: 'none' }}>Privacy Policy →</Link>
          <Link href={href('/terms')}   style={{ fontSize: 13, color: 'var(--ink-3)', textDecoration: 'none' }}>Terms →</Link>
          <Link href={href('/contact')} style={{ fontSize: 13, color: 'var(--ink-3)', textDecoration: 'none' }}>Contact →</Link>
        </div>
      </div>
    </>
  )
}