import { GlitchSlideThumbnail, defaultSlideRegistry } from '../vendor/gnommoplayer/gnommoplayer.js';

/**
 * Renders a GlitchSlideThumbnail from an editor slide record.
 *
 * The editor stores slides as flat DB rows; GlitchSlideThumbnail expects the
 * player's Slide shape. This component does that conversion.
 */
export default function SlideThumbnail({ videoId, slide, viewportMode = 'desktop' }) {
  if (!slide?.component_key) return null;

  const slideId = slide.gnommo_slide_id || slide.id;

  const playerSlide = {
    id: slideId,
    startTimeSec: slide.start_time_sec ?? 0,
    endTimeSec:   slide.end_time_sec   ?? undefined,
    displayMode:  slide.display_mode   || 'square',
    glitchSlides: [{
      id:           `${slideId}:default`,
      score:        1,
      componentKey: slide.component_key,
      props:        slide.props || {},
      latexString:  slide.props?.latexString,
    }],
  };

  const modeClass = viewportMode === 'mobile-portrait'
    ? 'slide-thumbnail-host--portrait'
    : 'slide-thumbnail-host--landscape';

  return (
    <div className={`gnommo-player-host slide-thumbnail-host ${modeClass}`}>
      <GlitchSlideThumbnail
        presentationId={videoId}
        slide={playerSlide}
        slideRegistry={defaultSlideRegistry}
        viewportMode={viewportMode}
      />
    </div>
  );
}
