'use client';

/** Gallery block — thin chat wrapper around `Gallery`. */

import { Gallery } from '../../../../media/Gallery';
import type { GalleryMediaItem } from '../../../../media/Gallery';
import type { GalleryBlock } from '../../../types/block';
import type { BlockRendererProps } from './types';

export default function GalleryBlockRenderer({ block, ctx }: BlockRendererProps<GalleryBlock>) {
  const images: GalleryMediaItem[] = block.items.map((item) => ({
    id: item.id,
    src: item.src,
    thumbnail: item.thumbnail,
    alt: item.alt,
  }));
  return (
    <div className="overflow-hidden rounded-xl border border-border">
      <Gallery
        images={images}
        showThumbnails={ctx.appearance !== 'compact'}
        enableLightbox
      />
    </div>
  );
}
