---
import Image from "astro/components/Image.astro";
const { src, alt } = Astro.props;

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

const image = getImageByPath(src);

// width of container is 896, width of image is set to 1344 to allow for hover zoom
---

{
  image && (
    <div class="my-8">
      <Image
        src={image}
        alt={alt}
        width={1344}
        class="transition ease-in-out lg:hover:scale-150"
      />
      <div class="mt-2 block w-full text-center text-sm italic">{alt}</div>
    </div>
  )
}
