'use client'
import React from 'react'

import { Landmark, Scale, ShieldCheck } from 'lucide-react'
import Link from 'next/link'
import type { Page } from '../../payload-types'

type Props = Extract<NonNullable<Page['layout']>[0], { blockType: 'affiliation' }>

const iconMap = {
  shield: ShieldCheck,
  scale: Scale,
  landmark: Landmark,
}

export const AffiliationBlock: React.FC<Props> = ({ eyebrow, title, description, logo, linkText, trustPoints }) => {
  return (
    <section className="py-20 md:py-32 bg-background border-t border-border overflow-hidden">
      <div className="container-premium">
        <div className="flex flex-col gap-16 lg:gap-24">
          <div className="max-w-3xl">
            <h2 className="font-heading text-3xl sm:text-4xl md:text-5xl font-extrabold tracking-tight text-foreground mb-6 text-balance">
              {title}
            </h2>
            <p className="text-foreground/75 text-lg md:text-xl font-light leading-relaxed mb-12 max-w-xl">
              {description}
            </p>
            
            <div className="flex flex-col sm:flex-row items-start sm:items-center gap-8">
              {logo && typeof logo === 'object' && logo.url && (
                <div className="w-40 shrink-0">
                  <img src={logo.url} alt={logo.alt || "Logo stowarzyszenia"} className="max-w-full h-auto grayscale hover:grayscale-0 transition-all duration-300" />
                </div>
              )}
              {linkText && (
                <Link href="/stowarzyszenie" className="text-accent font-semibold text-lg hover:text-accent-hover underline underline-offset-4">
                  {linkText}
                </Link>
              )}
            </div>
          </div>
          
          {trustPoints && trustPoints.length > 0 && (
            <div className="grid grid-cols-1 sm:grid-cols-3 gap-6">
              {trustPoints.map((point: any, index: number) => {
                const Icon = (point.icon && iconMap[point.icon as keyof typeof iconMap]) || ShieldCheck
                return (
                  <div key={point.id || index} className="bg-card border border-border p-6 md:p-8 flex flex-col gap-4">
                    <Icon size={28} className="text-accent" />
                    <h3 className="font-heading text-xl font-bold text-foreground">{point.title}</h3>
                    <p className="text-sm text-foreground/70 leading-relaxed">{point.description}</p>
                  </div>
                )
              })}
            </div>
          )}
        </div>
      </div>
    </section>
  )
}