import { Card, CardContent } from "@/components/ui/card"
import Link from "next/link"
import { Calendar } from "lucide-react"
import { VERTICALS } from "@/config/verticals"
import { notFound } from "next/navigation"

interface Props {
    params: Promise<{ vertical: string }>
}

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

// TODO: Make this dynamic based on the band's history
const currentYear = new Date().getFullYear()
const years = Array.from({ length: 50 }, (_, i) => currentYear - i)

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

    if (!vertical) {
        notFound()
    }

    return (
        <div className="flex flex-col gap-6">
            <h1 className="text-3xl font-bold tracking-tight">{vertical.name} Archive</h1>
            <p className="text-muted-foreground">Browse shows by year.</p>
            <div className="grid gap-4 md:grid-cols-3 lg:grid-cols-4">
                {years.map((year) => (
                    <Link key={year} href={`/${verticalSlug}/shows?year=${year}`}>
                        <Card className="hover:bg-accent/50 transition-colors cursor-pointer text-center py-6">
                            <CardContent>
                                <div className="text-4xl font-bold text-primary">{year}</div>
                                <div className="flex items-center justify-center gap-2 mt-2 text-muted-foreground">
                                    <Calendar className="h-4 w-4" />
                                    <span>Browse Shows</span>
                                </div>
                            </CardContent>
                        </Card>
                    </Link>
                ))}
            </div>
        </div>
    )
}