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

export function CtaBannerSection({ section }: { section: PageSection }) {
  const c = section.content
  const dark = isDarkBackground(section.settings)
  const heading = str(c, 'heading')
  const body = str(c, 'body')

  return (
    <div className="mx-auto max-w-3xl px-6 text-center">
      <h2 className="text-2xl font-semibold tracking-tight sm:text-3xl">{heading}</h2>
      {body && (
        <p
          className={`mx-auto mt-3 max-w-xl text-base ${dark ? 'text-brand-foreground/80' : 'text-muted-foreground'}`}
        >
          {body}
        </p>
      )}
      <div className="mt-6 flex justify-center">
        <PreviewButton
          label={str(c, 'buttonLabel')}
          href={str(c, 'buttonUrl')}
          tone={dark ? 'onDark' : 'primary'}
        />
      </div>
    </div>
  )
}
