import Image from "next/image";

import { isNextImageOptimizedSrc } from "@/lib/media/next-image-src";
import { cn } from "@/lib/utils";

type Props = {
  src: string;
  alt: string;
  className?: string;
};

/**
 * About hero: less extreme crop than 21:9 + top bias so faces stay in frame.
 */
export function AboutHeroImage({ src, alt, className }: Props) {
  const useNext = isNextImageOptimizedSrc(src);

  return (
    <div
      className={cn(
        "relative mx-auto mt-16 w-full max-w-5xl overflow-hidden rounded-3xl border border-white/10 neon-edge sm:mt-20",
        "h-[300px] sm:h-[460px] lg:h-[500px]",
        className,
      )}
    >
      {useNext ? (
        <Image
          src={src}
          alt={alt}
          fill
          className="object-cover object-top"
          sizes="(max-width: 896px) 100vw, 896px"
          priority
        />
      ) : (
        // eslint-disable-next-line @next/next/no-img-element
        <img
          src={src}
          alt={alt}
          className="absolute inset-0 size-full object-cover object-top"
        />
      )}
    </div>
  );
}