// Settings — URL `/dashboard/settings`. Also `renderMode: 'ssr'`, so it's
// gated by the same parent layout loader. The "sign out" button clears the
// demo cookie and hard-navigates to `/` so the next visit to /dashboard
// hits the gate fresh and is redirected to /login.
import type { ReactNode } from 'react'
import type { PageMeta } from '@voltro/web'
import { T } from '@voltro/i18n'
import { getCatalog } from '../../../locales/index'
import { SESSION_COOKIE } from '../../../lib/auth'

export const renderMode = 'ssr' as const

export const meta = ({ locale }: { readonly locale: string }): PageMeta => ({
  title: getCatalog(locale)['meta.settings.title'],
})

export default function Settings(): ReactNode {
  const signOut = (): void => {
    // Expire the cookie, then hard-navigate so the gate re-evaluates.
    document.cookie = `${SESSION_COOKIE}=; path=/; max-age=0`
    window.location.assign('/')
  }

  return (
    <section>
      <h1><T id="settings.heading" /></h1>
      <p className="muted"><T id="settings.intro" /></p>
      <p style={{ marginTop: '1.5rem' }}>
        <button type="button" className="btn" onClick={signOut}>
          <T id="settings.signOut" />
        </button>
      </p>
    </section>
  )
}