export function FramedImage({
  src,
  alt = "",
  aspect = "natural",
  offset = false,
}: {
  src: string;
  alt?: string;
  aspect?: "square" | "natural";
  offset?: boolean;
}) {
  return (
    <div className="relative mx-auto w-full">
      {offset ? (
        <div
          className="absolute -bottom-3 -left-3 h-[calc(100%-12px)] w-[calc(100%-12px)] rounded-2xl bg-[#EBEDF0]"
          aria-hidden
        />
      ) : null}
      <img
        src={src}
        alt={alt}
        className={`relative w-full rounded-2xl ${
          aspect === "square"
            ? "aspect-square object-cover"
            : "object-contain"
        }`}
      />
    </div>
  );
}