import type { ReactNode } from "react";
import Link from "next/link";
import { Placeholder } from "@/components/Placeholder";
import { parseAspectRatio } from "@/lib/static-images";

type SlotMediaProps = {
  src: string;
  alt?: string;
  href?: string;
  fallbackSrc?: string;
  aspectRatio?: string;
  className?: string;
  imgClassName?: string;
  fill?: boolean;
};

function wrap(href: string | undefined, children: ReactNode, className?: string) {
  if (!href) return <div className={className}>{children}</div>;
  if (href.startsWith("/") || href.startsWith("#")) {
    return (
      <Link href={href} className={className}>
        {children}
      </Link>
    );
  }
  return (
    <a href={href} className={className}>
      {children}
    </a>
  );
}

export function SlotMedia({
  src,
  alt = "",
  href,
  fallbackSrc,
  aspectRatio,
  className = "",
  imgClassName = "absolute inset-0 h-full w-full object-cover",
  fill = false,
}: SlotMediaProps) {
  const image = <Placeholder src={src} fallbackSrc={fallbackSrc} alt={alt} className={imgClassName} />;

  if (fill) {
    return wrap(href, image, `absolute inset-0 ${className}`.trim());
  }

  const ratio = parseAspectRatio(aspectRatio);
  return wrap(
    href,
    <span className="relative block h-full w-full overflow-hidden" style={ratio ? { aspectRatio: ratio } : undefined}>
      {image}
    </span>,
    className,
  );
}