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

/** Generic "Text Block" / mission statement section. */
export function MissionSection({ section }: { section: PageSection }) {
  const c = section.content
  const alignment = str(c, 'alignment', 'center')
  const align = alignment === 'left' ? 'text-left' : 'text-center mx-auto'
  const heading = str(c, 'heading')
  const body = str(c, 'body')

  return (
    <div className={`max-w-3xl px-6 ${align}`}>
      {heading && (
        <h2 className="text-foreground text-2xl font-semibold tracking-tight sm:text-3xl">
          {heading}
        </h2>
      )}
      {body && (
        <p className="text-muted-foreground mt-4 text-base leading-relaxed sm:text-lg">{body}</p>
      )}
    </div>
  )
}
