import React from 'react';

interface ImageBlockProps {
  src?: string;
  alt?: string;
  caption?: string;
  fullWidth?: boolean;
  anchorId?: string;
  width?: string;
  height?: string;
}

export function ImageBlock({ src = '', alt = '', caption = '', fullWidth = false, anchorId, width, height }: ImageBlockProps) {
  if (!src) return null;

  const imgWidth = width?.trim() || '100%';
  const imgHeight = height?.trim() || 'auto';
  return (
    <figure id={anchorId || undefined} className={`${fullWidth ? 'w-full' : 'container max-w-7xl mx-auto px-4'} py-8 scroll-mt-24`}>
      <img
        src={src}
        alt={alt}
        className="max-w-full rounded-xl shadow-sm"
        style={{ width: imgWidth, height: imgHeight, objectFit: 'cover' }}
        loading="lazy"
      />
      {caption && (
        <figcaption className="text-center text-sm text-text-light-gray mt-3">{caption}</figcaption>
      )}
    </figure>
  );
}
