'use client';

/**
 * Gallery block.
 *
 * - Compact chat (the common case) → a lightweight Telegram-style
 *   `ChatImageAlbum` collage: deterministic 1–N layouts, lazy thumbnails,
 *   tap-to-lightbox. No carousel chrome, no extra deps.
 * - Full appearance → the richer `Gallery` (carousel + thumbnail strip +
 *   lightbox) for a roomy, full-page chat.
 *
 * Frame (radius / border / clip) comes from the shared `BLOCK_SURFACE`.
 */

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

export default function GalleryBlockRenderer({ block, ctx }: BlockRendererProps<GalleryBlock>) {
  if (ctx.appearance === 'compact') {
    return <ChatImageAlbum images={block.items} />;
  }

  const images: GalleryMediaItem[] = block.items.map((item) => ({
    id: item.id,
    src: item.src,
    thumbnail: item.thumbnail,
    alt: item.alt,
  }));
  return <Gallery images={images} showThumbnails enableLightbox />;
}