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

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

export function ServicesGrid({ services }: { services: ServiceRow[] }) {
  const items: ServiceLike[] =
    services.length > 0
      ? services
      : (siteConfig.fallbackServices as readonly ServiceLike[]).slice();

  return (
    <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
      {items.map((s) => (
        <Link
          key={s.slug}
          href={`/hizmetler/${s.slug}`}
          id={s.slug}
          className="group relative overflow-hidden rounded-2xl border border-[var(--border)] bg-white p-6 transition hover:border-[var(--sky)]/40 hover:shadow-lg hover:shadow-[var(--sky)]/10"
        >
          <div
            className="absolute -right-12 -top-12 size-32 rounded-full bg-[var(--sky-50)] opacity-0 transition group-hover:opacity-100"
            aria-hidden
          />
          <ArrowUpRight className="absolute right-5 top-5 size-4 text-[var(--muted)] transition group-hover:text-[var(--sky-600)]" />
          <div className="relative">
            <div className="flex size-12 items-center justify-center rounded-xl bg-[var(--navy-50)] text-[var(--navy)]">
              <Icon name={s.icon} className="size-6" />
            </div>
            <h3 className="mt-5 text-lg font-semibold text-[var(--navy)] transition group-hover:text-[var(--sky-600)]">
              {s.title}
            </h3>
            <p className="mt-2 text-sm leading-relaxed text-[var(--muted)]">
              {s.description}
            </p>
          </div>
        </Link>
      ))}
    </div>
  );
}