<script lang="ts">
  import ScrollerSquash from '@components/ScrollerAnimate/ScrollerAnimate.svelte';

  // Types
  import type {
    ContainerWidth,
    ForegroundPosition,
  } from '@components/@types/global';
  
  type Graphic = {
    src: string;
    srcset: string;
    alt: string;
    title?: string;
    description?: string;
    notes?: string;
    width?: ContainerWidth;
  };
  
  interface Props {
    graphics: Graphic[];
    /** Duration of the animation, milliseconds **/
    animationDuration?: number;
    /** The moment when the animation is at its peak.
     ** It is here that we transition between steps and swap the graphic. 0-1 **/
    animationPeak?: number;
    /** Width of the background */
    backgroundWidth?: ContainerWidth;
    /** Position of the foreground */
    foregroundPosition?: ForegroundPosition;
  }

  let { 
    graphics, 
    backgroundWidth = 'fluid',
    foregroundPosition = 'middle',
    animationDuration = 350, 
    animationPeak = 0.8, 
  }: Props = $props();
</script>

<ScrollerSquash 
  {graphics} 
  {animationDuration}
  {animationPeak}
  {backgroundWidth}
  {foregroundPosition}
/>