import Link from "next/link";
import { ArrowUpRight } from "lucide-react";
import { Icon } from "@/components/icon";
import { siteConfig } from "@/lib/site-config";

type ServiceLike = {
  slug: string;
  title: string;
  description: string;
  icon?: string | null;
};

// Hem Hizmetler hem Çözümler için kullanılır — sadece basePath ve fallback değişir.
export function ServicesGrid({
  services,
  basePath = "/hizmetler",
  fallback,
}: {
  services: ServiceLike[];
  basePath?: string;
  fallback?: readonly ServiceLike[];
}) {
  const items: ServiceLike[] =
    services.length > 0
      ? services
      : ((fallback ?? siteConfig.fallbackServices) as readonly ServiceLike[]).slice();

  return (
    <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
      {items.map((s) => (
        <Link
          key={s.slug}
          href={`${basePath}/${s.slug}`}
          id={s.slug}
          className="group relative overflow-hidden rounded-2xl border border-[var(--border)] bg-white p-8 transition-all duration-300 hover:-translate-y-2 hover:border-[var(--sky)]/40 hover:shadow-2xl hover:shadow-[var(--navy)]/10"
        >
          <ArrowUpRight className="absolute right-6 top-6 size-4 text-[var(--muted)] opacity-0 transition-all duration-300 group-hover:translate-x-1 group-hover:-translate-y-1 group-hover:text-[var(--sky-600)] group-hover:opacity-100" />

          {/* Gradient icon — WP'deki stil */}
          <div className="flex size-14 items-center justify-center rounded-xl bg-gradient-to-br from-[var(--sky)] to-purple-500 text-white shadow-lg shadow-[var(--sky)]/30 transition-transform duration-300 group-hover:scale-110">
            <Icon name={s.icon} className="size-6" />
          </div>

          <h3 className="mt-6 text-lg font-bold leading-tight text-[var(--navy)] transition-colors group-hover:text-[var(--sky-600)]">
            {s.title}
          </h3>
          <p className="mt-3 text-sm leading-relaxed text-[var(--muted)]">
            {s.description}
          </p>
        </Link>
      ))}
    </div>
  );
}