---
import { Image } from 'astro:assets'
import wideCrossIconSrc from '@/assets/icons/WideCrossIcon.svg'

type Props = {
  texts: string[]
}

const { texts } = Astro.props
const repeatedTexts =
  texts.length < 10 ? Array.from({ length: 10 / texts.length }, () => texts).flat() : texts
---

<div class="flex h-full w-max animate-marquee items-center gap-10 text-5xl font-bold uppercase">
  {
    repeatedTexts.map((text) => (
      <>
        <h2>{text}</h2>
        <Image src={wideCrossIconSrc} alt="cross-icon" loading="eager" />
      </>
    ))
  }
</div>