'use client';

/** Image block — interactive → `ImageViewer`, otherwise a plain `<img>`. */

import { LazyImageViewer } from '../../../../ImageViewer/lazy';
import type { ImageBlock } from '../../../types/block';
import type { BlockRendererProps } from './types';

export default function ImageBlockRenderer({ block }: BlockRendererProps<ImageBlock>) {
  if (block.interactive) {
    return (
      <div className="overflow-hidden rounded-xl border border-border">
        <LazyImageViewer
          images={[{ file: { name: block.alt ?? 'image', path: block.src }, src: block.src }]}
        />
      </div>
    );
  }
  return (
    // eslint-disable-next-line @next/next/no-img-element
    <img
      src={block.src}
      alt={block.alt ?? ''}
      className="max-h-96 w-auto max-w-full rounded-xl border border-border object-contain"
    />
  );
}
