import React from 'react'
import type { FDIconBarBlock as FDIconBarBlockProps, Media } from '@/payload-types'
import { FDImage } from '@/components/FDImage'

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

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

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

// Icon circle bg — navy circles become yellow-tinted in dark when on a now-navy section
const iconBgMap: Record<string, string> = {
  navy:   'bg-fd-navy dark:bg-white/10',
  yellow: 'bg-fd-yellow',
  gray:   'bg-fd-gray-light dark:bg-white/10',
  none:   '',
}

export const FDIconBarBlockComponent: React.FC<FDIconBarBlockProps> = ({
  heading,
  icons,
  iconStyle = 'navy',
  sectionBackground = 'gray',
  textColor = 'navy',
}) => {
  const bg       = bgMap[sectionBackground || 'gray']
  const headClr  = headingMap[textColor || 'navy']
  const labelClr = labelMap[textColor || 'navy']
  const iconBg   = iconBgMap[iconStyle || 'navy']
  const hasCircle = iconStyle !== 'none'

  return (
    <section className={`w-full py-16 md:py-20 lg:py-[99px] ${bg}`}>
      <div className="max-w-[1200px] mx-auto px-6 md:px-8">
        {heading && (
          <h2 className={`font-joey-heavy text-fd-h1 mb-10 md:mb-14 ${headClr}`}>
            {heading}
          </h2>
        )}
        <div className="flex flex-wrap justify-center gap-8 md:gap-10 lg:gap-12">
          {icons?.map((item, index) => {
            const media = item.icon as Media
            const content = (
              <div className="flex flex-col items-center gap-3 md:gap-4">
                <div
                  className={`w-20 h-20 md:w-24 md:h-24 lg:w-28 lg:h-28 flex items-center justify-center ${
                    hasCircle ? `${iconBg} rounded-full` : ''
                  }`}
                >
                  {media?.url && (
                    <FDImage
                      media={media}
                      size="thumbnail"
                      className="w-10 h-10 md:w-12 md:h-12 lg:w-14 lg:h-14 object-contain"
                      sizes="56px"
                      fallbackAlt={item.label}
                    />
                  )}
                </div>
                <span className={`font-joey-bold text-fd-body text-center ${labelClr}`}>
                  {item.label}
                </span>
              </div>
            )
            if (item.link) {
              return (
                <a key={index} href={item.link} className="hover:opacity-80 transition-opacity">
                  {content}
                </a>
              )
            }
            return <div key={index}>{content}</div>
          })}
        </div>
      </div>
    </section>
  )
}