import prisma from "@/lib/prisma";
import Image from "next/image";

export default async function Banner() {
  const headerImage = await prisma.portfolioImage.findFirst({
    where: { setAsHeader: true },
    include: {
      variants: {
        where: { type: "modified" },
        take: 1,
      },
    },
  })

  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/${headerImage.variants[0].s3Key}`}
            alt={alt}
            fill
            className="object-cover"
            priority
          />
          {/* Overlay Logo / Title */}
          <div className="absolute inset-0 bg-black/40 flex items-center justify-center text-center">
            <h1 className="text-white text-3xl md:text-5xl font-bold drop-shadow">
              {title}
            </h1>
          </div>
        </div>
      )}
    </div>
  );
}