<script lang="ts">
	import { reveal } from '$lib/actions/reveal';
	import LazyLoadingImg from './LazyLoadingImg.svelte';
	import type { Sponsor } from '$lib/types';

	let { sponsors }: { sponsors: Sponsor[] } = $props();
</script>

{#if sponsors.length}
	<div id="sponsors" class="my-20 flex flex-col items-center justify-center md:my-32" use:reveal>
		<div class="flex flex-col items-center justify-center">
			<h1 class="text-center font-urbanist text-2xl font-semibold md:text-5xl">Sponsors</h1>
			<span class="text-md mt-2 px-2 text-center font-urbanist md:mt-4 md:px-5 md:text-xl">
				Folks supporting my open source work. Thank you so much!
			</span>
		</div>
		<div class="container mt-10 grid grid-cols-3 gap-6 p-4 sm:grid-cols-4 md:grid-cols-6 md:gap-8">
			{#each sponsors as sponsor (sponsor.login)}
				<a
					class="group flex flex-col items-center gap-2 transition duration-300 hover:-translate-y-1"
					href={sponsor.url}
					target="_blank"
					rel="noopener noreferrer"
					title={sponsor.name}
				>
					<LazyLoadingImg
						class="h-16 w-16 rounded-full ring-2 ring-base-content/10 group-hover:ring-primary md:h-20 md:w-20"
						src={sponsor.avatarUrl}
						alt={sponsor.name}
					/>
					<span class="max-w-20 truncate text-center font-urbanist text-sm font-medium opacity-60">
						{sponsor.name}
					</span>
				</a>
			{/each}
		</div>
	</div>
{/if}
