import type { DefaultDocumentIDType } from 'payload'

import { BadgeCheck, CalendarDays, MapPin, Network } from 'lucide-react'
import React from 'react'

import type { DasarKepercayaanBlock as DasarKepercayaanBlockProps } from '@/payload-types'
import { cn } from '@/utilities/cn'

type TrustItem = NonNullable<DasarKepercayaanBlockProps['items']>[number]

const iconMap = {
  calendar_today: CalendarDays,
  hub: Network,
  location_on: MapPin,
  verified: BadgeCheck,
} as const

export const DasarKepercayaanBlock: React.FC<
  DasarKepercayaanBlockProps & {
    id?: DefaultDocumentIDType
    className?: string
  }
> = ({ className, description, heading, items }) => {
  if (!items || items.length === 0) return null

  return (
    <section className={cn('bg-primary py-12', className)}>
      <div className="max-w-7xl mx-auto px-4 md:px-16">
        <div className="mx-auto mb-8 max-w-3xl text-center">
          <h2 className="font-serif text-3xl font-medium text-primary-foreground md:text-4xl">{heading}</h2>
          <p className="mt-4 text-base leading-relaxed text-primary-foreground/90 md:text-lg">
            {description}
          </p>
        </div>

        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
          {items.map((item: TrustItem, index) => {
            const Icon = iconMap[item.icon as keyof typeof iconMap]

            return (
              <article
                className="flex h-full flex-col items-center rounded-2xl border border-border/20 bg-white dark:bg-card p-6 text-center shadow-sm hover:shadow-md transition-shadow duration-300"
                key={`${item.title}-${index}`}
              >
                <div className="mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-primary/10 text-primary">
                  {Icon ? <Icon className="h-8 w-8 stroke-[1.8]" /> : null}
                </div>

                <h3 className="mb-2 text-sm font-bold uppercase tracking-wide text-primary">
                  {item.title}
                </h3>
                <p className="text-sm leading-relaxed text-muted-foreground">{item.description}</p>
              </article>
            )
          })}
        </div>
      </div>
    </section>
  )
}