import { createFileRoute } from '@tanstack/react-router'
import { useTranslation } from 'react-i18next'
import { useRequireAuth } from '@/features/auth/guards'
import { ChangePasswordForm } from '@/features/settings/ChangePasswordForm'
import { ChangeUserNameForm } from '@/features/settings/ChangeUserNameForm'
import { TelegramLinkCard } from '@/features/settings/TelegramLinkCard'
import { DeleteAccountSection } from '@/features/settings/DeleteAccountSection'

export const Route = createFileRoute('/settings')({ component: SettingsPage })

function SettingsPage() {
  const { t } = useTranslation()
  const { isReady } = useRequireAuth()

  if (!isReady) return null

  return (
    <div className="mx-auto flex w-full max-w-2xl flex-col gap-6 px-6 py-10">
      <h1 className="text-2xl font-semibold tracking-tight">{t('nav.settings')}</h1>
      <ChangePasswordForm />
      <ChangeUserNameForm />
      <TelegramLinkCard />
      <DeleteAccountSection />
    </div>
  )
}