import { getString } from "./BlockHelpers";

export default function ImageBlock({
  content,
}: {
  content: Record<string, unknown>;
}) {
  const src = getString(content, "src");
  const alt = getString(content, "alt");
  const caption = getString(content, "caption");

  if (!src) return null;

  return (
    <figure className="my-10">
      <img
        src={src}
        alt={alt}
        className="h-auto w-full border-2 border-dark object-cover"
      />

      {caption && (
        <figcaption className="mt-2 text-center text-sm text-tn1">
          {caption}
        </figcaption>
      )}
    </figure>
  );
}