<script>
	import { Marquee } from 'flowbite-svelte';
	import { projects } from '$lib/projects.js';
	import VendorIcon from '../ProjectCard/VendorIcon.svelte';

	const allVendors = Array.from(
		new Map(
			projects.flatMap((project) => project.vendors).map((vendor) => [vendor.name, vendor])
		).values()
	);
</script>

<Marquee
	speed={0.5}
	hoverSpeed={0.25}
	class="py-4 bg-stone-200 dark:bg-slate-800 rounded-xl flex items-center"
>
	{#each allVendors as vendor}
		<VendorIcon {...vendor} />
	{/each}
</Marquee>
