import React from 'react'
import {
  FileText,
  Calculator,
  ShieldCheck,
  Scale,
  HelpCircle,
  Users,
  Coins,
  LucideIcon,
} from 'lucide-react'

const iconMap: Record<string, LucideIcon> = {
  fileText: FileText,
  calculator: Calculator,
  shieldCheck: ShieldCheck,
  scale: Scale,
  helpCircle: HelpCircle,
  users: Users,
  coins: Coins,
}

export interface ServicesDetailedProps {
  title: string
  subtitle?: string | null
  services?: Array<{
    id?: string | null
    title: string
    description: string
    icon?: string | null
  }> | null
}

export const ServicesDetailedBlock: React.FC<ServicesDetailedProps> = ({
  title,
  subtitle,
  services,
}) => {
  return (
    <section className="py-12 md:py-16">
      <div className="container-premium">
        <div className="max-w-3xl mb-12">
          <h2 className="font-heading text-2xl sm:text-3xl md:text-4xl font-bold text-foreground tracking-tight">
            {title}
          </h2>
          {subtitle && (
            <p className="mt-3 text-base sm:text-lg text-foreground/70 leading-relaxed">
              {subtitle}
            </p>
          )}
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
          {(services || []).map((service, index) => {
            const Icon = (service.icon && iconMap[service.icon]) || FileText

            return (
              <div
                key={service.id || index}
                className="bg-card border border-border rounded-2xl p-6 md:p-8 flex flex-col justify-between hover:border-accent/50 hover:shadow-md transition-all duration-200"
              >
                <div>
                  <div className="w-12 h-12 rounded-xl bg-accent/10 text-accent flex items-center justify-center mb-6">
                    <Icon size={24} />
                  </div>
                  <h3 className="font-heading text-xl font-bold text-foreground mb-3 leading-snug">
                    {service.title}
                  </h3>
                  <p className="text-foreground/75 text-sm sm:text-base leading-relaxed">
                    {service.description}
                  </p>
                </div>
              </div>
            )
          })}
        </div>
      </div>
    </section>
  )
}