import type { Icon } from "@tabler/icons-react";
import { getTranslations } from "next-intl/server";
import { FadeIn } from "@/components/ui/fade-in";
import { Link } from "@/i18n/navigation";

export interface ServiceHubGridItem {
  bullets: string[];
  description: string;
  href: string;
  icon: Icon;
  title: string;
}

interface ServiceHubGridProps {
  gradientDirection?: string;
  heading: string;
  items: ServiceHubGridItem[];
  subtitle: string;
}

export async function ServiceHubGrid({
  heading,
  subtitle,
  items,
  gradientDirection = "bg-gradient-to-tr",
}: ServiceHubGridProps) {
  const tCommon = await getTranslations("common");

  return (
    <section
      className={`relative py-12 md:py-24 ${gradientDirection} overflow-hidden from-[#000] to-[#1A2428]`}
    >
      <div className="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8">
        {/* Header */}
        <div className="mx-auto mb-8 max-w-4xl text-center md:mb-16">
          <FadeIn>
            <h2 className="mb-6 font-bold text-2xl text-white sm:text-3xl md:text-5xl">
              {heading}
            </h2>
            <p className="mx-auto max-w-3xl text-base text-neutral-200 md:text-lg">
              {subtitle}
            </p>
          </FadeIn>
        </div>

        {/* Services Grid */}
        <div
          className={`grid grid-cols-1 ${
            items.length >= 3 ? "lg:grid-cols-3" : "lg:grid-cols-2"
          } mx-auto max-w-7xl gap-4 md:gap-8`}
        >
          {items.map((item, index) => (
            <FadeIn
              className="group relative"
              delay={index * 0.1}
              duration={0.6}
              ease={[0.21, 0.47, 0.32, 0.98]}
              key={item.title}
              viewportAmount={0.2}
            >
              <Link href={item.href}>
                <div className="relative h-full rounded-2xl border border-[#333333] bg-[#1a1a1a]/80 p-4 backdrop-blur-sm transition-all duration-300 hover:border-[#FD105E]/50 hover:bg-[#1a1a1a] sm:p-6 md:p-8">
                  {/* Icon and Title */}
                  <div className="mb-6 flex items-start">
                    <div className="flex h-14 w-14 flex-shrink-0 items-center justify-center rounded-xl border border-[#FD105E]/20 bg-[#FD105E]/10 transition-transform duration-300 group-hover:scale-110">
                      <item.icon
                        className="h-7 w-7 text-[#FD105E]"
                        strokeWidth={1.5}
                      />
                    </div>
                    <div className="mt-2 ml-4">
                      <h3 className="mb-1 font-bold text-2xl text-white">
                        {item.title}
                      </h3>
                    </div>
                  </div>

                  {/* Description */}
                  <p className="mb-6 text-neutral-200 text-sm leading-relaxed">
                    {item.description}
                  </p>

                  {/* Bullets */}
                  <div>
                    <h4 className="mb-3 font-semibold text-neutral-400 text-xs uppercase tracking-wide">
                      {tCommon("whatWeCover")}
                    </h4>
                    <ul className="space-y-2">
                      {item.bullets.map((bullet) => (
                        <li
                          className="flex items-start text-neutral-300 text-sm"
                          key={bullet}
                        >
                          <span className="mt-1 mr-2 text-[#FD105E]">→</span>
                          {bullet}
                        </li>
                      ))}
                    </ul>
                  </div>

                  {/* Arrow indicator */}
                  <div className="absolute right-6 bottom-6 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
                    <span className="font-semibold text-[#FD105E] text-sm">
                      {tCommon("explore")}
                    </span>
                  </div>
                </div>
              </Link>
            </FadeIn>
          ))}
        </div>
      </div>
    </section>
  );
}