---
import MainLayout from "../layouts/main.astro";
import profileData from '../data/profile.json';
import Icon from "../components/icon.svelte";

type IconData = {
	name: string;
	url: string;
	icon: string;
	iconUrl?: string;
}

const profileName = profileData.name;

const personalLinks = [];
const profesionalLinks = [];

for (let link of profileData.personalLinks) {
	const withUrl: IconData = { ...link };

	withUrl.iconUrl = `/icons/${link.icon}.svg`;

	personalLinks.push(withUrl);
}

for (let link of profileData.profesionalLinks) {
	const withUrl: IconData = { ...link };

	withUrl.iconUrl = `/icons/${link.icon}.svg`;

	profesionalLinks.push(withUrl);
}
---

<MainLayout>
	<h2 class="font-mono font-bold uppercase text-xl my-14 mx-auto tracking-wide w-11/12 max-w-5xl dark:text-white">
		Personal Links</h2>
	<div class="grid grid-cols-2 md:grid-cols-4 gap-4 w-11/12 max-w-5xl my-2 mx-auto">

		{personalLinks.map(perLink => (
		<Icon client:load perLink={perLink} profileName={profileName} />
		))}
	</div>
	<h2 class="font-mono font-bold uppercase text-xl my-14 mx-auto tracking-wide w-11/12 max-w-5xl dark:text-white">
		Profesional Links</h2>
	<div class="grid grid-cols-2 md:grid-cols-4 gap-4 w-11/12 max-w-5xl my-2 mx-auto">
		{profesionalLinks.map(perLink => (
		<Icon client:load perLink={perLink} profileName={profileName} />
		))}
	</div>
</MainLayout>