import Link from "next/link";
import { MapPin } from "lucide-react";
import { cities } from "@/data/cities";
import type { Category } from "@/data/categories";

interface CityLinksProps {
  category: Category;
}

export default function CityLinks({ category }: CityLinksProps) {
  return (
    <section className="mt-12 rounded-2xl border border-white/6 bg-white/2 p-6 sm:p-8">
      <div className="flex items-center gap-2">
        <MapPin className="h-5 w-5 text-emerald-400" />
        <h2 className="text-lg font-bold text-white">
          Şehirlere Göre {category.title}
        </h2>
      </div>
      <p className="mt-2 text-sm text-slate-400">
        Türkiye&apos;nin büyük şehirlerinde {category.searchTitle.toLowerCase()} araması
      </p>
      <div className="mt-5 flex flex-wrap gap-2">
        {cities.map((city) => (
          <Link
            key={city.slug}
            href={`/sehir/${city.slug}/${category.slug}`}
            className="rounded-full border border-white/10 bg-white/5 px-4 py-2 text-sm font-medium text-slate-300 transition-all hover:border-emerald-500/30 hover:bg-emerald-500/10 hover:text-white"
          >
            {city.name}
            <span className="ml-1.5 text-xs text-slate-500">{city.population}</span>
          </Link>
        ))}
      </div>
    </section>
  );
}