// Dashboard overview — URL `/dashboard`. `renderMode: 'ssr'` so the parent
// layout's auth-gate loader runs per request (see dashboard/layout.tsx).
// A real app would read live data with `useSubscription` from an api here;
// this template keeps it backend-free, so the figures are placeholders.
import type { ReactNode } from 'react'
import type { PageMeta } from '@voltro/web'
import { T } from '@voltro/i18n'
import { getCatalog } from '../../locales'

export const renderMode = 'ssr' as const

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

const stats = [
  { labelId: 'overview.stat.projects', value: '12' },
  { labelId: 'overview.stat.members', value: '37' },
  { labelId: 'overview.stat.issues', value: '4' },
  { labelId: 'overview.stat.uptime', value: '99.9%' },
] as const

export default function Overview(): ReactNode {
  return (
    <section>
      <h1><T id="overview.heading" /></h1>
      <p className="muted"><T id="overview.intro" /></p>
      <div className="cards" style={{ marginTop: '1.25rem' }}>
        {stats.map((s) => (
          <div className="card" key={s.labelId}>
            <div className="label"><T id={s.labelId} /></div>
            <div className="value">{s.value}</div>
          </div>
        ))}
      </div>
    </section>
  )
}