import Image from "next/image";

import { cn } from "@/lib/utils";

type CmsImageProps = {
  src: string | null;
  alt: string;
  className?: string;
  priority?: boolean;
  sizes?: string;
};

function resolveImageUrl(src: string) {
  if (src.startsWith("http")) {
    return src;
  }

  if (src.startsWith("/") && !src.startsWith("/storage/")) {
    return src;
  }

  const cdnUrl = process.env.NEXT_PUBLIC_CDN_URL?.replace(/\/$/, "");

  if (cdnUrl) {
    const rawPath = src.startsWith("/") ? src : `/${src}`;
    const path = rawPath.startsWith("/storage/") ? rawPath.replace(/^\/storage/, "") : rawPath;

    return `${cdnUrl}${path}`;
  }

  const adminUrl = (process.env.NEXT_PUBLIC_ADMIN_URL ?? "http://admin.localhost").replace(/\/$/, "");
  const path = src.startsWith("/") ? src : `/storage/${src}`;

  return `${adminUrl}${path}`;
}

export function CmsImage({
  src,
  alt,
  className,
  priority = false,
  sizes = "(min-width: 1280px) 384px, (min-width: 1024px) 33vw, (min-width: 640px) 50vw, 100vw",
}: CmsImageProps) {
  if (!src) {
    return null;
  }

  return (
    <Image
      src={resolveImageUrl(src)}
      alt={alt}
      width={1200}
      height={675}
      priority={priority}
      sizes={sizes}
      className={cn("aspect-video rounded-xl object-cover", className)}
    />
  );
}