import type { PageSection } from '../../../lib/page-editor-service.js'
import { str } from './parts.js'

interface Stat {
  value?: unknown
  label?: unknown
  description?: unknown
}

export function ByTheNumbersSection({ section }: { section: PageSection }) {
  const c = section.content
  const heading = str(c, 'heading')
  const body = str(c, 'body')
  const stats = Array.isArray(c.stats) ? (c.stats as Stat[]) : []

  return (
    <div className="mx-auto max-w-5xl px-6 text-center">
      {heading && (
        <h2 className="text-foreground text-2xl font-semibold tracking-tight sm:text-3xl">
          {heading}
        </h2>
      )}
      {body && <p className="text-muted-foreground mx-auto mt-4 max-w-2xl text-base">{body}</p>}
      {stats.length > 0 && (
        <dl className="mt-10 grid grid-cols-1 gap-8 sm:grid-cols-3">
          {stats.map((s, i) => (
            <div key={i}>
              <dt className="text-brand text-4xl font-semibold tracking-tight">
                {String(s.value ?? '')}
              </dt>
              <dd className="text-foreground mt-2 text-sm font-medium">{String(s.label ?? '')}</dd>
              {s.description ? (
                <dd className="text-muted-foreground mt-1 text-xs">{String(s.description)}</dd>
              ) : null}
            </div>
          ))}
        </dl>
      )}
    </div>
  )
}
