wwwfiberdirekt/src/blocks/FDPricingCardBlock/Component.tsx

import React from 'react'
import type { FDPricingCardBlock as FDPricingCardBlockProps } from '@/payload-types'
import { FDButton } from '@/components/FDButton'
import { fdCardRadius as cardRadius, fdContainer} from '@/utilities/fdTheme'

const sectionBgMap: Record<string, string> = {
  white:  'bg-white dark:bg-fd-navy',
  navy:   'bg-fd-navy',
  gray:   'bg-fd-gray-light dark:bg-fd-navy',
  yellow: 'bg-fd-yellow',
}

const titleColorMap: Record<string, string> = {
  navy:   'text-fd-navy dark:text-fd-yellow',
  white:  'text-white',
  yellow: 'text-fd-yellow',
}

const cardStyleMap: Record<string, {
  bg: string; border: string; title: string
  subtitle: string; body: string; bullet: string; isDark: boolean
}> = {
  outlined: {
    bg:       'bg-white dark:bg-white/10',
    border:   'border-[5px] border-gray-200 dark:border-white/20',
    title:    'text-fd-navy dark:text-fd-yellow',
    subtitle: 'text-fd-navy dark:text-white',
    body:     'text-fd-navy/80 dark:text-white/80',
    bullet:   'text-fd-navy dark:text-white',
    isDark:   false,
  },
  navy: {
    bg: 'bg-fd-navy dark:bg-white/10', border: '', title: 'text-fd-yellow',
    subtitle: 'text-white', body: 'text-white/80', bullet: 'text-white', isDark: true,
  },
  gray: {
    bg:       'bg-fd-gray-light dark:bg-white/10',
    border:   '',
    title:    'text-fd-navy dark:text-white',
    subtitle: 'text-fd-navy dark:text-white',
    body:     'text-fd-navy/80 dark:text-white/80',
    bullet:   'text-fd-navy dark:text-white',
    isDark:   false,
  },
  yellow: {
    bg: 'bg-fd-yellow', border: '', title: 'text-fd-navy',
    subtitle: 'text-fd-navy', body: 'text-fd-navy/80', bullet: 'text-fd-navy', isDark: false,
  },
  white: {
    bg:       'bg-white dark:bg-white/10 shadow-fd-card dark:shadow-none',
    border:   '',
    title:    'text-fd-navy dark:text-fd-yellow',
    subtitle: 'text-fd-navy dark:text-white',
    body:     'text-fd-navy/80 dark:text-white/80',
    bullet:   'text-fd-navy dark:text-white',
    isDark:   false,
  },
}

const buttonVariantMap: Record<string, { variant: 'primary' | 'outline' }> = {
  yellow:        { variant: 'primary' },
  navy:          { variant: 'primary' },
  outlinedNavy:  { variant: 'outline' },
  outlinedWhite: { variant: 'outline' },
}

const gridColsMap: Record<number, string> = {
  1: 'min-[820px]:grid-cols-1 max-w-[500px] mx-auto',
  2: 'min-[820px]:grid-cols-2',
  3: 'min-[820px]:grid-cols-3',
}


export const FDPricingCardBlockComponent: React.FC<FDPricingCardBlockProps> = ({
  sectionTitle,
  cards,
  cardStyle = 'outlined',
  buttonColor = 'yellow',
  sectionBackground = 'white',
  titleColor = 'navy',
  anchorId,
}) => {
  const sectionBg       = sectionBgMap[sectionBackground || 'white']
  const sectionTitleColor = titleColorMap[titleColor || 'navy']
  const style           = cardStyleMap[cardStyle || 'outlined']
  const { variant }     = buttonVariantMap[buttonColor || 'yellow']
  const cardCount       = cards?.length || 1
  const gridCols        = gridColsMap[cardCount] || gridColsMap[3]
  const outlineOnDark   = style.isDark

  return (
    <section id={anchorId || undefined} className={`w-full py-16 md:py-20 lg:py-[99px] ${sectionBg}`}>
      <div className={fdContainer}>
        {sectionTitle && (
          <h2 className={`font-joey-heavy text-fd-h1 text-center mb-10 md:mb-14 ${sectionTitleColor}`}>
            {sectionTitle}
          </h2>
        )}
        <div className={`grid grid-cols-1 ${gridCols} gap-4 min-[820px]:gap-5 lg:gap-8`}>
          {cards?.map((card, index) => (
            <div
              key={index}
              className={`${style.bg} ${style.border} ${cardRadius} px-6 min-[820px]:px-8 lg:px-12 py-8 min-[820px]:py-10 lg:py-14 flex flex-col gap-5`}
            >
              <h3 className={`font-joey-heavy text-fd-h2 leading-tight ${style.title}`}>
                {card.title}
              </h3>
              {card.subtitle && (
                <p className={`font-joey-bold text-fd-h3 leading-tight ${style.subtitle}`}>
                  {card.subtitle}
                </p>
              )}
              {card.description && (
                <p className={`font-joey text-fd-body-lg leading-relaxed ${style.body}`}>
                  {card.description}
                </p>
              )}
              {card.bulletPoints && card.bulletPoints.length > 0 && (
                <ul className={`flex flex-col gap-2 ${style.bullet}`}>
                  {card.bulletPoints.map((point, i) => (
                    <li key={i} className="flex items-start gap-3">
                      <span className="mt-2 w-2 h-2 rounded-full bg-current flex-shrink-0" />
                      <span className="font-joey text-fd-body-lg">{point.text}</span>
                    </li>
                  ))}
                </ul>
              )}
              {card.ctaText && (
                <div className="mt-auto pt-4">
                  <FDButton
                    href={card.ctaLink || '#'}
                    variant={variant}
                    onDark={variant === 'outline' ? outlineOnDark : style.isDark}
                    className="w-full sm:w-auto justify-center"
                  >
                    {card.ctaText}
                  </FDButton>
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}