<script lang="ts">
  import { cn } from '@/lib/utils'

  type Direction = 'left' | 'up'

  interface Props {
    direction?: Direction
    pauseOnHover?: boolean
    reverse?: boolean
    fade?: boolean
    innerClassName?: string
    numberOfCopies?: number
    duration?: string
    gap?: string
    class?: string
    children?: import('svelte').Snippet
  }

  let {
    direction = 'left',
    pauseOnHover = false,
    reverse = false,
    fade = false,
    innerClassName = '',
    numberOfCopies = 2,
    duration = '20s',
    gap = '1rem',
    class: className = '',
    children
  }: Props = $props()

  let isPaused = $state(false)

  function handleMouseEnter() {
    if (pauseOnHover) isPaused = true
  }

  function handleMouseLeave() {
    if (pauseOnHover) isPaused = false
  }
</script>

<!-- svelte-ignore a11y_no_static_element_interactions -->
<div
  class={cn(
    'group relative flex overflow-hidden py-1',
    direction === 'left' ? 'flex-row' : 'flex-col',
    className
  )}
  style="gap: {gap};"
  onmouseenter={handleMouseEnter}
  onmouseleave={handleMouseLeave}
>
  {#each Array(numberOfCopies) as _, i (i)}
    <div
      class={cn(
        'flex justify-around shrink-0',
        direction === 'left' ? 'flex-row' : 'flex-col',
        innerClassName
      )}
      style="--gap: {gap}; gap: {gap}; animation: {direction === 'left' ? 'marquee-left' : 'marquee-up'} {duration} linear infinite {reverse ? 'reverse' : ''}; animation-play-state: {isPaused ? 'paused' : 'running'};"
    >
      {#if children}
        {@render children()}
      {/if}
    </div>
  {/each}

  {#if fade}
    <div
      class={cn(
        'pointer-events-none absolute inset-0',
        direction === 'left'
          ? 'bg-[linear-gradient(to_right,var(--color-background)_0%,transparent_15%,transparent_85%,var(--color-background)_100%)]'
          : 'bg-[linear-gradient(to_bottom,var(--color-background)_0%,transparent_15%,transparent_85%,var(--color-background)_100%)]'
      )}
    ></div>
  {/if}
</div>
