import React from 'react'
import type { FDUspTableBlock as FDUspTableBlockProps } from '@/payload-types'

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

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

const borderMap: Record<string, string> = {
  navy:  'border-fd-navy/10',
  white: 'border-white/20',
}

const checkColors: Record<string, { circle: string; check: string }> = {
  navy:   { circle: '#0E2338', check: 'white' },
  yellow: { circle: '#FECC02', check: '#0E2338' },
  gray:   { circle: '#F0F0F0', check: '#0E2338' },
}

const CheckIcon: React.FC<{ color: string }> = ({ color }) => {
  const c = checkColors[color] || checkColors.navy
  return (
    <svg width="40" height="40" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg" className="flex-shrink-0">
      <circle cx="23" cy="23" r="23" fill={c.circle} />
      <path d="M34.2166 16.2092L19.8151 30.6108C19.3551 31.0354 19.1074 31.3185 18.7182 31.3185C18.3643 31.3185 18.1166 31.1062 17.6212 30.6108L11.9597 24.9492C11.6059 24.5954 11.4289 24.3477 11.4289 24.1C11.4289 23.8523 11.6412 23.5692 11.9951 23.2154L12.5612 22.6492C12.9505 22.26 13.2335 22.0477 13.5166 22.0477C13.7643 22.0477 14.012 22.2246 14.3659 22.5785L18.7182 26.9662L31.8105 13.8385C32.1643 13.4846 32.412 13.3431 32.6597 13.3431C32.9428 13.3431 33.1551 13.4846 33.6151 13.9092L34.1812 14.4754C34.5351 14.8292 34.712 15.1123 34.712 15.36C34.712 15.6077 34.5705 15.8554 34.2166 16.2092Z" fill={c.check} />
    </svg>
  )
}

export const FDUspTableBlockComponent: React.FC<FDUspTableBlockProps> = ({
  heading,
  rows,
  checkColor = 'navy',
  background = 'white',
  textColor = 'navy',
}) => {
  const bg = bgMap[background || 'white']
  const txt = textMap[textColor || 'navy']
  const border = borderMap[textColor || 'navy']

  return (
    <section className={`w-full py-12 md:py-16 lg:py-20 ${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 ${txt}`}>{heading}</h2>
        )}
        <div className="flex flex-col">
          {rows?.map((row, index) => (
            <div
              key={index}
              className={`flex flex-col md:flex-row md:items-start gap-4 md:gap-8 py-7 md:py-8 ${
                index < (rows.length - 1) ? `border-b ${border}` : ''
              }`}
            >
              <div className="flex items-center gap-4 md:w-[280px] flex-shrink-0">
                <CheckIcon color={checkColor || 'navy'} />
                <span className={`font-joey-bold text-fd-h3 ${txt}`}>{row.title}</span>
              </div>
              <p className={`font-joey text-fd-body ${txt} opacity-80 md:pl-0 pl-14`}>
                {row.description}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}