import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import Link from "next/link"

// Mock data for now - will fetch from API later
const recentShows = [
    { id: 1, date: "2023-12-31", venue: "Madison Square Garden", location: "New York, NY", band: "Phish" },
    { id: 2, date: "2023-12-30", venue: "Madison Square Garden", location: "New York, NY", band: "Phish" },
    { id: 3, date: "2023-12-29", venue: "Madison Square Garden", location: "New York, NY", band: "Phish" },
]

export default function ArchivePage() {
    return (
        <div className="flex flex-col gap-6">
            <h1 className="text-3xl font-bold tracking-tight">Archive</h1>
            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
                {recentShows.map((show) => (
                    <Link key={show.id} href={`/shows/${show.id}`}>
                        <Card className="hover:bg-accent/50 transition-colors cursor-pointer">
                            <CardHeader>
                                <CardTitle>{show.date}</CardTitle>
                            </CardHeader>
                            <CardContent>
                                <p className="font-semibold">{show.band}</p>
                                <p className="text-sm text-muted-foreground">{show.venue}</p>
                                <p className="text-sm text-muted-foreground">{show.location}</p>
                            </CardContent>
                        </Card>
                    </Link>
                ))}
            </div>
        </div>
    )
}