import Link from "next/link";
import { notFound } from "next/navigation";
import SiteNav from "@/components/site-nav";
import SiteFooter from "@/components/site-footer";
import { getAlbums } from "@/lib/gallery";
import { getGalleryAlbum } from "@db/queries/gallery-db";
import { CalendarIcon, LocationIcon } from "@/components/icons";
import GalleryGrid from "./gallery-grid";

export function generateStaticParams() {
  return getAlbums().map((a) => ({ slug: a.slug }));
}

export default async function AlbumPage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const album = await getGalleryAlbum(slug);
  if (!album) notFound();

  return (
    <div className="flex-1 bg-bg">
      <div className="bg-bg border-b border-line">
        <SiteNav />
      </div>

      <section className="bg-bg">
        <div className="max-w-6xl mx-auto px-4 pt-12 pb-8">
          <Link href="/gallery" className="text-sm text-muted hover:text-white">
            ← All albums
          </Link>
          <span className="mt-5 inline-block rounded-full bg-brand-green/20 px-3 py-1 text-xs font-semibold text-brand-green-h">
            {album.concept}
          </span>
          <h1 className="mt-3 text-4xl sm:text-5xl font-black tracking-tight text-white">
            {album.title}
          </h1>
          <div className="mt-3 flex flex-wrap gap-5 text-sm text-muted">
            <span className="flex items-center gap-2">
              <CalendarIcon className="w-4 h-4" /> {album.date}
            </span>
            <span className="flex items-center gap-2">
              <LocationIcon className="w-4 h-4" /> {album.venue}
            </span>
            <span>{album.photos.length} photos</span>
          </div>
        </div>
      </section>

      <section className="bg-bg">
        <div className="max-w-6xl mx-auto px-4 pb-16">
          <GalleryGrid photos={album.photos} title={album.title} />
        </div>
      </section>

      <SiteFooter />
    </div>
  );
}