import Image, { type StaticImageData } from "next/image";

type Props = {
  src: string | StaticImageData;
  alt?: string;
  className?: string;
  sizes?: string;
  priority?: boolean;
};

export function Media({ src, alt = "", className = "", sizes, priority }: Props) {
  const remote = typeof src === "string" && /^https?:\/\//.test(src);

  return (
    <div className={`relative overflow-hidden bg-zinc-100 ${className}`}>
      <Image
        src={src}
        alt={alt}
        fill
        sizes={sizes ?? "100vw"}
        className="object-cover"
        priority={priority}
        unoptimized={remote}
      />
    </div>
  );
}