import { ChevronRight } from 'lucide-react'
import { Link } from 'react-router'
import { AccountSummary, LogoutButton } from '@/components/layout/app-layout'
import { moreNav } from '@/components/layout/nav-items'
import { PageHeader } from '@/components/page'
import { ThemeToggle } from '@/components/theme-toggle'
import { t } from '@/lib/strings'

/** Mobil "☰ Diğer": alt menüye sığmayan sayfalar, tema ve hesap. */
export function MorePage() {
  return (
    <>
      <PageHeader title={t.pages.more.title} />

      <nav className="divide-y overflow-hidden rounded-xl border bg-card">
        {moreNav.map(({ to, label, icon: Icon }) => (
          <Link
            key={to}
            to={to}
            className="flex min-h-14 items-center gap-3 px-4 transition-colors hover:bg-muted"
          >
            <Icon className="size-5 text-muted-foreground" aria-hidden />
            <span className="flex-1 font-medium">{label}</span>
            <ChevronRight className="size-4 text-muted-foreground" aria-hidden />
          </Link>
        ))}
      </nav>

      <section className="mt-6 space-y-3">
        <h2 className="text-sm font-medium text-muted-foreground">{t.account.theme}</h2>
        <ThemeToggle className="w-full [&>button]:flex-1" />
      </section>

      <section className="mt-6 flex items-center justify-between gap-3 rounded-xl border bg-card p-4">
        <AccountSummary />
        <LogoutButton />
      </section>
    </>
  )
}