import Image from "@/components/ui/resilient-image";

export function GuideExportBranding({
  backgroundUrl,
  variant = "standard",
}: {
  backgroundUrl: string;
  variant?: "standard" | "constellation";
}) {
  const constellation = variant === "constellation";

  return (
    <>
      <Image
        src={backgroundUrl}
        alt=""
        fill
        loading="eager"
        sizes={constellation ? "1500px" : "1200px"}
        className="object-cover"
      />
      <div className="absolute inset-0 bg-[#050817]/65" />
      <Image
        src="/icon/Watermark.png"
        alt=""
        width={constellation ? 280 : 180}
        height={constellation ? 158 : 101}
        loading="eager"
        className={
          constellation
            ? "guide-export-watermark absolute right-4 bottom-0 z-30 h-auto w-70 object-contain drop-shadow-[0_4px_3px_rgba(0,0,0,0.8)]"
            : "guide-export-watermark absolute top-4 right-4 z-30 h-auto w-45 object-contain drop-shadow-[0_4px_3px_rgba(0,0,0,0.8)]"
        }
      />
    </>
  );
}