import { prisma } from "@/lib/prisma";
import { cn } from "@/lib/utils";
import localFont from 'next/font/local';
import Image from "next/image";

const myFont = localFont({
  src: './Echotopia-Regular.woff2',
})

export default async function Banner() {
  const headerImage = await prisma.artwork.findFirst({
    where: { setAsHeader: true },
    include: {
      file: true
    }
  })

  const alt = headerImage?.altText ?? "Header Image"
  const title = "Gaertan Art"

  return (
    <div className="w-full">
      {headerImage && (
        <div className="relative w-full h-24 md:h-48 lg:h-48">
          <Image
            src={`/api/image/modified/${headerImage.file.fileKey}.webp`}
            alt={alt}
            fill
            className="object-cover"
            priority
          />
          <div className="absolute inset-0 bg-black/40 flex items-center justify-center text-center">
            <h1 className={cn(myFont.className, "text-shadow text-white text-3xl md:text-5xl font-bold drop-shadow")}>
              {title}
            </h1>
          </div>
        </div>
      )}
    </div>
  );
}