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

export const FDContactBlockComponent: React.FC<FDContactBlockProps> = ({
  heading,
  contactMethods,
}) => {
  return (
    <section className="relative w-full bg-fd-navy py-16 md:py-20 lg:pt-[100px] lg:pb-[120px]">
      <div className="max-w-[1200px] mx-auto px-6 md:px-8 flex flex-col items-center gap-8 lg:gap-10">
        <h2 className="w-full font-joey-heavy text-fd-navy text-fd-h1 text-fd-yellow text-center">
          {heading}
        </h2>
        <div className="flex flex-row items-stretch gap-4 md:gap-7 w-full max-w-[656px]">
          {contactMethods?.map((method, index) => {
            const media = method.icon as Media
            const card = (
              <div className="flex-1 flex flex-col items-center gap-3 md:gap-5 cursor-pointer transition-transform hover:scale-105">
                {media?.url && (
                  <div className="relative w-full h-[120px] md:h-[160px] lg:h-[200px] overflow-hidden rounded-[70px]">
                    <FDImage
                      media={media}
                      size="medium"
                      fill
                      className="object-cover"
                      sizes="(max-width: 768px) 50vw, 300px"
                      fallbackAlt={method.label}
                    />
                  </div>
                )}
                <p className="w-full font-joey-bold text-white text-fd-h2 text-center">
                  {method.label}
                </p>
              </div>
            )
            if (method.link) {
              return <a key={index} href={method.link} className="flex-1">{card}</a>
            }
            return <div key={index} className="flex-1">{card}</div>
          })}
        </div>
      </div>
    </section>
  )
}