/**
 * ServicesGrid - Server Component
 *
 * Displays a grid of service offerings with icons and optional links.
 * Uses Tabler/Lucide icons - no emojis.
 *
 * @example
 * ```tsx
 * <ServicesGrid
 *   title="Nos Solutions"
 *   subtitle="Adaptees a votre secteur"
 *   services={[
 *     { icon: IconBolt, title: "Electricite Pro", description: "Comparaison des offres", href: "/electricite" },
 *     { icon: IconFlame, title: "Gaz Naturel", description: "Tarifs negocies", href: "/gaz" },
 *   ]}
 * />
 * ```
 */

import { cn } from "@/lib/utils";
import {
  IconArrowRight,
  IconBolt,
  IconChartBar,
  IconFileDescription,
  IconFlame,
  IconLeaf,
  IconShieldCheck,
} from "@tabler/icons-react";
import Link from "next/link";
import type { ServiceItem, ServicesGridProps } from "./types";

/**
 * Icon mapping for string-based icon names
 */
const iconMap: Record<string, React.ComponentType<{ className?: string }>> = {
  bolt: IconBolt,
  flame: IconFlame,
  leaf: IconLeaf,
  chart: IconChartBar,
  shield: IconShieldCheck,
  file: IconFileDescription,
};

/**
 * Get icon component from string name or return the component directly
 */
function getIconComponent(
  icon: ServiceItem["icon"]
): React.ComponentType<{ className?: string }> {
  if (typeof icon === "string") {
    return iconMap[icon] || IconBolt;
  }
  return icon as React.ComponentType<{ className?: string }>;
}

export function ServicesGrid({
  title,
  subtitle,
  services,
  columns = 3,
}: ServicesGridProps) {
  const gridCols = {
    2: "lg:grid-cols-2",
    3: "lg:grid-cols-3",
    4: "lg:grid-cols-4",
  };

  return (
    <section id="solutions" className="bg-gray-50 py-16 md:py-24 lg:py-32">
      <div className="mx-auto max-w-7xl px-4 md:px-8">
        {/* Header */}
        <div className="mb-12 text-center md:mb-16">
          <h2 className="text-2xl font-bold capitalize tracking-tight bg-linear-to-b from-[rgba(255,167,86,1)] to-[rgba(238,96,44,1)] bg-clip-text text-transparent md:text-4xl lg:text-5xl">
            {title}
          </h2>
          {subtitle && (
            <p className="mt-4 text-base font-semibold text-gray-900 md:text-lg">
              {subtitle}
            </p>
          )}
        </div>

        {/* Services Grid */}
        <div
          className={cn(
            "grid grid-cols-1 gap-6 md:grid-cols-2",
            gridCols[columns]
          )}
        >
          {services.map((service) => (
            <ServiceCard key={service.title} service={service} />
          ))}
        </div>
      </div>
    </section>
  );
}

/**
 * Individual service card - renders as link if href provided
 */
function ServiceCard({ service }: { service: ServiceItem }) {
  const IconComponent = getIconComponent(service.icon);

  const cardContent = (
    <>
      {/* Icon */}
      <div className="mb-4 flex size-14 items-center justify-center rounded-2xl bg-linear-to-br from-orange-500 to-orange-600 text-white shadow-lg shadow-orange-500/20 transition-transform duration-300 group-hover:scale-110">
        <IconComponent className="size-7" />
      </div>

      {/* Content */}
      <h3 className="mb-2 text-lg font-bold text-gray-900 md:text-xl">
        {service.title}
      </h3>
      <p className="text-sm text-gray-600 md:text-base">
        {service.description}
      </p>

      {/* Arrow indicator for links */}
      {service.href && (
        <div className="mt-4 flex items-center text-sm font-medium text-orange-700 transition-transform duration-300 group-hover:translate-x-1">
          <span>En savoir plus</span>
          <IconArrowRight className="ml-1 size-4" />
        </div>
      )}
    </>
  );

  const cardClasses = cn(
    "group relative rounded-2xl bg-white p-6 shadow-sm transition-all duration-300 hover:shadow-xl md:p-8",
    "border border-gray-100 hover:border-orange-200"
  );

  if (service.href) {
    return (
      <Link href={service.href} className={cardClasses}>
        {cardContent}
      </Link>
    );
  }

  return <div className={cardClasses}>{cardContent}</div>;
}