import { notFound } from "next/navigation"
import { VERTICALS } from "@/contexts/vertical-context"

interface Props {
    params: { vertical: string }
}

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

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

    if (!vertical) {
        notFound()
    }

    return (
        <div className="space-y-8">
            <div className="text-center space-y-4">
                <h1 className="text-4xl font-bold flex items-center justify-center gap-4">
                    <span className="text-5xl">{vertical.emoji}</span>
                    <span style={{ color: vertical.color }}>{vertical.name}</span>
                </h1>
                <p className="text-muted-foreground max-w-2xl mx-auto">
                    Explore setlists, rate performances, and connect with the {vertical.name} community.
                </p>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                <a
                    href={`/${vertical.slug}/shows`}
                    className="block p-6 rounded-lg border bg-card hover:bg-accent transition-colors"
                >
                    <h2 className="text-xl font-semibold mb-2">Shows</h2>
                    <p className="text-muted-foreground">Browse all concerts and setlists</p>
                </a>

                <a
                    href={`/${vertical.slug}/songs`}
                    className="block p-6 rounded-lg border bg-card hover:bg-accent transition-colors"
                >
                    <h2 className="text-xl font-semibold mb-2">Songs</h2>
                    <p className="text-muted-foreground">Explore the catalog and stats</p>
                </a>

                <a
                    href={`/${vertical.slug}/venues`}
                    className="block p-6 rounded-lg border bg-card hover:bg-accent transition-colors"
                >
                    <h2 className="text-xl font-semibold mb-2">Venues</h2>
                    <p className="text-muted-foreground">See where they've played</p>
                </a>
            </div>
        </div>
    )
}