import { notFound } from "next/navigation";
import Link from "next/link";
import { Shell } from "@/components/Shell";
import { db, showcaseItems } from "@/db";
import { eq } from "drizzle-orm";
import { Avatar } from "@/components/Avatar";
import { Markdown } from "@/components/Markdown";

export default async function ShowcaseItemPage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const s = await db.query.showcaseItems.findFirst({ where: eq(showcaseItems.slug, slug), with: { author: true } });
  if (!s) notFound();
  return (
    <Shell>
      <section className="mx-auto max-w-5xl px-5 pt-14 pb-8">
        <p className="eyebrow"><Link href="/showcase" className="hover:text-ink">Showcase</Link> · {s.discipline.toLowerCase()} · {s.kind.toLowerCase()}</p>
        <h1 className="display mt-3">{s.title}</h1>
        <p className="mt-4 text-xl text-ink/75 max-w-3xl">{s.blurb}</p>
        <div className="mt-6 flex flex-wrap items-center gap-4">
          {s.author && <Link href={`/people/${s.author.slug}`} className="flex items-center gap-2 text-sm hover:text-soul"><Avatar person={s.author} size={32} /> {s.author.firstName} {s.author.lastName}</Link>}
          {s.url && <a href={s.url} target="_blank" rel="noreferrer" className="btn btn-soul">Open it ↗</a>}
        </div>
      </section>
      {s.embedUrl && (
        <div className="mx-auto max-w-5xl px-5"><div className="aspect-video overflow-hidden rounded-2xl border border-line bg-black"><iframe src={s.embedUrl} className="h-full w-full" title={s.title} allow="fullscreen" /></div></div>
      )}
      {s.imageUrl && !s.embedUrl && (
        // eslint-disable-next-line @next/next/no-img-element
        <div className="mx-auto max-w-5xl px-5"><img src={s.imageUrl} alt="" className="rounded-2xl border border-line" /></div>
      )}
      {s.body && <section className="mx-auto max-w-3xl px-5 py-10"><Markdown>{s.body}</Markdown></section>}
    </Shell>
  );
}