import { notFound } from "next/navigation";
import Link from "next/link";
import {
  LOCATIONS,
  SERVICES,
  LOCATION_KEYS,
  SITE,
  type Lang,
} from "@/lib/config";

export const revalidate = SITE.revalidateSeconds;

export async function generateStaticParams() {
  return ["ar", "en"].flatMap((lang) =>
    LOCATION_KEYS.map((key) => ({
      lang,
      location: LOCATIONS[key].slug[lang as Lang],
    })),
  );
}

function findLoc(lang: Lang, slug: string) {
  return Object.values(LOCATIONS).find((l) => l.slug[lang] === slug) ?? null;
}

export default function LocationPage({
  params,
}: {
  params: { lang: Lang; location: string };
}) {
  const loc = findLoc(params.lang, params.location);
  if (!loc) return notFound();
  const pairs = Object.values(SERVICES).map((s) => ({
    href: `/${params.lang}/${loc.slug[params.lang]}/${s.slug[params.lang]}`,
    name: s.name[params.lang],
    icon: s.icon,
  }));
  return (
    <main className="max-w-6xl mx-auto px-4 py-16">
      <h1 className="text-3xl font-bold">{loc.name[params.lang]}</h1>
      <div className="grid md:grid-cols-3 gap-6 mt-6">
        {pairs.map((p) => (
          <Link
            key={p.href}
            href={p.href}
            className="border rounded-xl p-6 hover:border-brand-green transition"
          >
            <div className="text-3xl">{p.icon}</div>
            <div className="mt-2 text-xl font-semibold">{p.name}</div>
          </Link>
        ))}
      </div>
    </main>
  );
}