import React from 'react'
import type { FDFeatureAnnouncementBlock as FDFeatureAnnouncementBlockProps } from '@/payload-types'
import { FDButton } from '@/components/FDButton'

export const FDFeatureAnnouncementBlockComponent: React.FC<FDFeatureAnnouncementBlockProps> = ({
  heading,
  body,
  ctaText,
  ctaLink = '#',
  theme = 'gray',
  anchorId,
}) => {
  const isDark = theme === 'dark'

  // Light themes pick up dark: variants from OS preference
  const bgClass =
    isDark
      ? 'bg-fd-navy'
      : theme === 'gray'
        ? 'bg-fd-gray-light dark:bg-fd-navy'
        : 'bg-white dark:bg-fd-navy'

  const headingColor = isDark
    ? 'text-fd-yellow'
    : 'text-fd-navy dark:text-fd-yellow'

  const bodyColor = isDark
    ? 'text-white'
    : 'text-fd-navy dark:text-white'

  // In dark mode the section is always navy, so onDark=true for the button
  const onDark = isDark || true // once dark: kicks in bg is navy anyway

  return (
    <section id={anchorId || undefined} className={`w-full py-20 md:py-28 lg:py-[173px] ${bgClass}`}>
      <div className="max-w-[1200px] mx-auto px-6 md:px-8 flex flex-col items-center gap-8">
        <h2
          className={`w-full max-w-[696px] font-joey-bold text-fd-h1 text-center leading-tight ${headingColor}`}
        >
          {heading}
        </h2>

        <p
          className={`w-full max-w-[1112px] font-joey text-xl md:text-fd-body-lg text-center leading-relaxed ${bodyColor}`}
        >
          {body}
        </p>

        {ctaText && (
          <FDButton href={ctaLink || '#'} variant="primary" onDark={isDark}>
            {ctaText}
          </FDButton>
        )}
      </div>
    </section>
  )
}