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

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

  return (
    <div className="mx-auto max-w-3xl px-6 text-center">
      {eyebrow && (
        <p
          className={`mb-3 text-sm font-medium tracking-wide uppercase ${dark ? 'text-brand-foreground/80' : 'text-brand'}`}
        >
          {eyebrow}
        </p>
      )}
      <h1 className="text-3xl leading-tight font-semibold tracking-tight sm:text-5xl">
        {heading || 'Your headline goes here'}
      </h1>
      {body && (
        <p
          className={`mx-auto mt-5 max-w-2xl text-base sm:text-lg ${dark ? 'text-brand-foreground/80' : 'text-muted-foreground'}`}
        >
          {body}
        </p>
      )}
      <div className="mt-8 flex flex-wrap items-center justify-center gap-3">
        <PreviewButton
          label={str(c, 'primaryButtonLabel')}
          href={str(c, 'primaryButtonUrl')}
          tone={dark ? 'onDark' : 'primary'}
        />
        <PreviewButton
          label={str(c, 'secondaryButtonLabel')}
          href={str(c, 'secondaryButtonUrl')}
          tone="ghost"
        />
      </div>
    </div>
  )
}
