import { ReactNode } from "react"

export function LegalPage({
  eyebrow,
  title,
  updated,
  children,
}: {
  eyebrow: string
  title: string
  updated?: string
  children: ReactNode
}) {
  return (
    <div className="mx-auto max-w-3xl px-4 sm:px-6 lg:px-8 py-16">
      <div className="mb-12 border-b border-[var(--border)] pb-8">
        <p className="font-mono text-xs uppercase tracking-widest text-[var(--accent)] mb-3">
          {eyebrow}
        </p>
        <h1 className="text-4xl md:text-5xl font-heading font-bold uppercase tracking-tight text-[var(--text)]">
          {title}
        </h1>
        {updated && (
          <p className="mt-4 font-mono text-xs text-[var(--text-muted)]">
            Dernière mise à jour : {updated}
          </p>
        )}
      </div>
      <div className="legal-body space-y-8">{children}</div>
    </div>
  )
}

export function Section({ title, children }: { title: string; children: ReactNode }) {
  return (
    <section>
      <h2 className="text-xl font-heading font-bold uppercase tracking-tight text-[var(--text)] mb-4">
        {title}
      </h2>
      <div className="space-y-3 text-[var(--text-secondary)] leading-relaxed">
        {children}
      </div>
    </section>
  )
}

export function Todo({ children }: { children: ReactNode }) {
  return (
    <span className="font-mono text-xs bg-[var(--accent)] text-white px-1.5 py-0.5">
      {children}
    </span>
  )
}