<script lang="ts">
	import type { Skill } from '$lib/data/types';
	import Icon from '@iconify/svelte';

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

<div class="-mx-5 grid md:grid-cols-2 lg:grid-cols-3 gap-7 text-center p-5">
	{#each skills as skill}
		<!-- <div class="px-5"> -->
		<!-- w-full md:basis-1/2 lg:basis-1/3 -->
		<div class="rounded-xl bg-gray-50 p-2 sm:p-8 lg:px-6 xl:px-9">
			<Icon icon={skill.icon} class="text-5xl mx-auto mb-5" />
			<div>
				<h3 class="mb-4 text-lg font-medium sm:text-xl lg:text-lg xl:text-xl">{skill.title}</h3>
				<p class="text-lg font-light">
					{skill.text}
				</p>
			</div>
		</div>
		<!-- </div> -->
	{/each}
</div>
