import type { Figure as FigureData } from "@/data/explore";

/** Editorial photo with caption and licence credit. Text sits under the image, never over it. */
export default function Figure({ figure }: { figure: FigureData }) {
  return (
    <figure className="fig" data-ratio={figure.ratio ?? "default"}>
      <div className="fig-frame">
        <img src={figure.src} alt={figure.alt} loading="lazy" decoding="async" />
      </div>
      <figcaption>
        <span>{figure.caption}</span>
        <small>Photo: {figure.credit}</small>
      </figcaption>
    </figure>
  );
}