import Reveal from "./Reveal";
import { awardFor, filmography } from "@/content/site";

export default function Filmography() {
  return (
    <ul className="grid grid-cols-2 gap-x-4 gap-y-8 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 lg:gap-x-6">
      {filmography.map((c, i) => (
        <li key={c.slug}>
          <Reveal delay={(i % 5) * 60}>
            <figure className="group">
              <div className="relative aspect-[2/3] overflow-hidden bg-ink-2 ring-1 ring-line">
                {/* eslint-disable-next-line @next/next/no-img-element */}
                <img
                  src={c.poster}
                  alt={`${c.title} poster`}
                  loading="lazy"
                  className="h-full w-full object-cover grayscale-[35%] transition duration-700 ease-out group-hover:scale-[1.04] group-hover:grayscale-0"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
                <div className="absolute top-2 left-2 flex flex-wrap gap-1">
                  {c.upcoming && (
                    <span className="bg-accent px-1.5 py-0.5 font-mono text-[10px] tracking-[0.2em] text-ink uppercase">
                      Upcoming
                    </span>
                  )}
                  {awardFor(c.slug) && (
                    <span className="bg-fg px-1.5 py-0.5 font-mono text-[10px] tracking-[0.2em] text-ink uppercase">
                      {awardFor(c.slug)!.body} {awardFor(c.slug)!.result}
                    </span>
                  )}
                  {c.network && (
                    <span className="bg-black/70 px-1.5 py-0.5 font-mono text-[10px] tracking-[0.2em] text-fg uppercase backdrop-blur-sm">
                      {c.network}
                    </span>
                  )}
                </div>
              </div>
              <figcaption className="mt-3">
                <p className="text-sm leading-snug">{c.title}</p>
                <p className="mt-1 font-mono text-[10px] tracking-[0.2em] text-muted uppercase">
                  {c.year} · {c.format}
                </p>
              </figcaption>
            </figure>
          </Reveal>
        </li>
      ))}
    </ul>
  );
}