---
import Icon from './Icon.astro';

import directus from "../../lib/directus"
import { readSingleton } from "@directus/sdk";

const skills = await directus.request(readSingleton("skills"));
---

<section class="box skills">
	<div class="stack gap-2 lg:gap-4">
		<Icon icon="cloud" color="var(--accent-regular)" size="2.5rem" gradient />
		<h2 set:html={skills.skill_1}/>
		<p set:html={skills.skill_1_description}/>
	</div>
	<div class="stack gap-2 lg:gap-4">
		<Icon icon="network" color="var(--accent-regular)" size="2.5rem" gradient />
		<h2 set:html={skills.skill_2}/>
		<p set:html={skills.skill_2_description}/>
	</div>
	<div class="stack gap-2 lg:gap-4">
		<Icon icon="strategy" color="var(--accent-regular)" size="2.5rem" gradient />
		<h2 set:html={skills.skill_3}/>
		<p set:html={skills.skill_3_description}/>
	</div>
</section>

<style>
	.box {
		border: 1px solid var(--gray-800);
		border-radius: 0.75rem;
		padding: 1.5rem;
		background-color: var(--gray-999_40);
		box-shadow: var(--shadow-sm);
	}

	.skills {
		display: flex;
		flex-direction: column;
		gap: 3rem;
	}

	.skills h2 {
		font-size: var(--text-lg);
	}

	.skills p {
		color: var(--gray-400);
	}

	@media (min-width: 50em) {
		.box {
			border-radius: 1.5rem;
			padding: 2.5rem;
		}

		.skills {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 5rem;
		}

		.skills h2 {
			font-size: var(--text-2xl);
		}
	}
</style>