fediversion/frontend/app/[vertical]/venues/page.tsx

import { VERTICALS } from "@/contexts/vertical-context"
import { notFound } from "next/navigation"
import { getApiUrl } from "@/lib/api-config"

interface Props {
    params: { vertical: string }
}

export function generateStaticParams() {
    return VERTICALS.map((v) => ({
        vertical: v.slug,
    }))
}

async function getVenues(verticalSlug: string) {
    try {
        const res = await fetch(`${getApiUrl()}/venues?vertical=${verticalSlug}`, {
            next: { revalidate: 60 }
        })
        if (!res.ok) return []
        return res.json()
    } catch {
        return []
    }
}

export default async function VenuesPage({ params }: Props) {
    const vertical = VERTICALS.find((v) => v.slug === params.vertical)

    if (!vertical) {
        notFound()
    }

    const venues = await getVenues(vertical.slug)

    return (
        <div className="space-y-6">
            <div className="flex items-center justify-between">
                <h1 className="text-3xl font-bold">
                    <span className="mr-2">{vertical.emoji}</span>
                    {vertical.name} Venues
                </h1>
            </div>

            {venues.length === 0 ? (
                <div className="text-center py-12 text-muted-foreground">
                    <p>No venues imported yet for {vertical.name}.</p>
                    <p className="text-sm mt-2">Run the data importer to populate venues.</p>
                </div>
            ) : (
                <div className="grid gap-3">
                    {venues.map((venue: any) => (
                        <a
                            key={venue.id}
                            href={`/${vertical.slug}/venues/${venue.slug}`}
                            className="flex justify-between items-center p-4 rounded-lg border bg-card hover:bg-accent transition-colors"
                        >
                            <div>
                                <div className="font-semibold">{venue.name}</div>
                                <div className="text-sm text-muted-foreground">
                                    {venue.city}, {venue.state || venue.country}
                                </div>
                            </div>
                            {venue.capacity && (
                                <div className="text-sm text-muted-foreground">
                                    Capacity: {venue.capacity.toLocaleString()}
                                </div>
                            )}
                        </a>
                    ))}
                </div>
            )}
        </div>
    )
}