import Link from "next/link";
import { ArrowRight } from "lucide-react";
import type { Category } from "@/data/categories";
import CategoryIcon from "@/lib/category-icons";

interface RelatedCategoriesProps {
  categories: Category[];
  citySlug?: string;
}

export default function RelatedCategories({
  categories,
  citySlug,
}: RelatedCategoriesProps) {
  if (categories.length === 0) return null;

  return (
    <section className="mt-12 border-t border-white/5 pt-10">
      <h2 className="text-lg font-bold text-white sm:text-xl">İlgili Kategoriler</h2>
      <p className="mt-1 text-sm text-slate-500">
        Benzer aramalar — aynı bölgede popüler
      </p>
      <div className="mt-5 grid grid-cols-2 gap-3 sm:grid-cols-4">
        {categories.map((cat) => {
          const href = citySlug
            ? `/sehir/${citySlug}/${cat.slug}`
            : `/${cat.slug}`;
          return (
            <Link
              key={cat.slug}
              href={href}
              className="category-card group flex items-center gap-3 rounded-xl border border-white/6 bg-white/3 p-3.5"
            >
              <div
                className={`flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-gradient-to-br ${cat.color}`}
              >
                <CategoryIcon name={cat.icon} className="h-5 w-5 text-white" />
              </div>
              <div className="min-w-0 flex-1">
                <p className="truncate text-sm font-semibold text-white">{cat.title}</p>
                <p className="text-xs text-slate-500">{cat.searches}</p>
              </div>
              <ArrowRight className="h-4 w-4 shrink-0 text-slate-600 transition-transform group-hover:translate-x-0.5 group-hover:text-emerald-400" />
            </Link>
          );
        })}
      </div>
    </section>
  );
}