<script>
import ProfileCard from './ProfileCard.svelte'
import { onMount } from 'svelte'
let name = 'world';
// 1. When the index is at 3 (last item) - the item is removed with no effects
// 2. There is no overlap of the images - even though I gave an overlapping delay
const profiles = [
{link: "/1xyz", name: "1abc", cover_image_url: "https://fastly.picsum.photos/id/10/2500/1667.jpg?hmac=J04WWC_ebchx3WwzbM-Z4_KC_LeLBWr5LZMaAkWkF68"},
{link: "/2xyz", name: "2abc", cover_image_url: "https://fastly.picsum.photos/id/12/2500/1667.jpg?hmac=Pe3284luVre9ZqNzv1jMFpLihFI6lwq7TPgMSsNXw2w"},
{link: "/3xyz", name: "3abc", cover_image_url: "https://fastly.picsum.photos/id/19/2500/1667.jpg?hmac=7epGozH4QjToGaBf_xb2HbFTXoV5o8n_cYzB7I4lt6g"},
{link: "/4xyz", name: "4abc", cover_image_url: "https://fastly.picsum.photos/id/26/4209/2769.jpg?hmac=vcInmowFvPCyKGtV7Vfh7zWcA_Z0kStrPDW3ppP0iGI"}
]
let currentIndex = 0
let timer
const delay = 4_000
onMount(() => {
timer = setInterval(changeIndex, delay)
return () => clearInterval(timer)
})
function changeIndex() {
currentIndex = (currentIndex + 1) % profiles.length
}
</script>
{#key currentIndex}
<a
class="relative"
href={profiles[currentIndex].link}
>