import type { DefaultDocumentIDType } from 'payload'

import { BadgeCheck, Boxes, MessageCircle, Truck } from 'lucide-react'
import React from 'react'

import { cn } from '@/utilities/cn'
import type { ValuePropositionsBlock as ValuePropositionsBlockProps } from '@/payload-types'

type ValueItem = NonNullable<ValuePropositionsBlockProps['items']>[number]

const iconMap = {
  forum: MessageCircle,
  inventory_2: Boxes,
  local_shipping: Truck,
  verified: BadgeCheck,
} as const

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

  return (
    <section className={cn('bg-secondary py-6', className)}>
      <div className="max-w-7xl mx-auto px-4 md:px-16">
        <div className="bg-white dark:bg-card rounded-[2rem] border border-border/20 px-4 py-6 shadow-xl md:px-7">
          <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4 md:gap-2">
            {items.map((item: ValueItem, index) => {
              const Icon = iconMap[item.icon as keyof typeof iconMap]

              return (
                <React.Fragment key={`${item.title}-${index}`}>
                  <div className="flex flex-1 items-center gap-4 px-2 py-3 text-left group hover:bg-muted/50 p-4 rounded-2xl transition-all">
                    <div className="shrink-0 text-primary">
                      {Icon ? <Icon className="h-10 w-10 stroke-[1.6]" /> : null}
                    </div>

                    <div className="min-w-0 space-y-1">
                      <h3 className="text-sm md:text-base font-bold leading-tight text-primary">
                        {item.title}
                      </h3>
                      <p className="text-xs md:text-sm leading-snug text-muted-foreground">{item.description}</p>
                    </div>
                  </div>

                  {index < items.length - 1 ? (
                    <div className="hidden md:block w-px h-12 bg-border/20" />
                  ) : null}
                </React.Fragment>
              )
            })}
          </div>
        </div>
      </div>
    </section>
  )
}