import { ExploreFilters } from "@/components/venues/ExploreFilters";
import { AdSlot } from "@/components/shared/AdSlot";
import { SectionHeading } from "@/components/shared/SectionHeading";
import { getPublishedCategories } from "@/lib/queries/categories";
import { getAllCities } from "@/lib/queries/cities";
import { getPublishedVenues } from "@/lib/queries/venues";
import { toVenueCardData } from "@/lib/types";

interface ExplorePageProps {
  searchParams: Promise<{ city?: string }>;
}

export const metadata = {
  title: "探索場地",
  description: "搜尋並篩選亞洲夜生活場地，找到最適合你的夜遊去處。",
};

export default async function ExplorePage({ searchParams }: ExplorePageProps) {
  const { city } = await searchParams;
  const [venues, cities, venueCategories] = await Promise.all([
    getPublishedVenues(),
    getAllCities(),
    getPublishedCategories("venue"),
  ]);

  return (
    <div className="py-12 sm:py-16">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <SectionHeading
          title="探索夜遊場地"
          subtitle="依城市、類型篩選，找到你的下一個夜色目的地"
        />
        <div className="mt-8">
          <AdSlot slot="explore_top" />
        </div>
        <div className="mt-10">
          <ExploreFilters
            venues={venues.map(toVenueCardData)}
            initialCity={city}
            cities={cities.map((c) => ({ slug: c.slug, nameZh: c.nameZh }))}
            venueTypes={venueCategories.map((c) => c.nameZh)}
          />
        </div>
      </div>
    </div>
  );
}