/**
 * SiteLayout —— 前台公开站点的共享外壳(报头 + 内容区 + 页脚)。
 *
 * 背景:此前 `HomePage` 与 `StandingsLayout` 各自复制了一遍
 * `<main className="mx-auto max-w-5xl px-5 py-6 sm:px-8 sm:py-8">`
 * 和 `<footer className="mx-auto max-w-5xl px-5 pb-10 sm:px-8">`。
 * 两处 className 逐字相同,唯一差异是 Masthead 的 active 值与
 * 页脚文案。改一次容器内边距要改两处,加第三个页面就是第三处。
 *
 * 这里把「容器宽度 / 内边距 / 页脚分隔线样式」收进单一来源,
 * 调用方只需提供 active(决定报头高亮)与页脚文案。
 */

import type { ReactNode } from 'react'
import Masthead from './Masthead'
import type { MastheadActive } from './Masthead'

/** 报头的 active 分区,决定报刊头里哪个分区链接高亮 */
export type SiteSection = MastheadActive

export interface SiteLayoutProps {
  /** 当前分区,用于报头高亮 */
  active: SiteSection
  /** 页脚文案(各分区声明差异,如首页含免责声明) */
  footerNote: ReactNode
  children: ReactNode
}

export function SiteLayout({ active, footerNote, children }: SiteLayoutProps) {
  return (
    <div className="min-h-screen bg-paper-50">
      <Masthead active={active} />

      <main className="mx-auto max-w-5xl px-5 py-6 sm:px-8 sm:py-8">
        {children}
      </main>

      <footer className="mx-auto max-w-5xl px-5 pb-10 sm:px-8">
        <div className="border-t border-ink-200 pt-3 text-center text-2xs leading-relaxed text-ink-400">
          {footerNote}
        </div>
      </footer>
    </div>
  )
}

export default SiteLayout