<script lang="ts">
	import type { Skills } from '$lib/types/data';
	import SkillEntry from '$lib/components/SkillEntry.svelte';

	let { anchorId,title, subtitle, entries }: Skills = $props()
</script>

<section id={anchorId}>
	<h2>{title}</h2>
	{#if (subtitle)}
		<p>{subtitle}</p>
	{/if}
	<div>
		{#each entries as entry, i (i)}
			<SkillEntry {...entry} />
		{/each}
	</div>
</section>

<style>
    section {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        gap: 1rem;
        padding: 5rem 1rem;

        @media (min-width: 768px) {
            padding: 6rem 2.5rem;
        }
    }

    h2 {
        margin: unset;

        font-size: 1.875rem;
        text-align: center;

        color: transparent;
        background-image: var(--color-headline-background-image);
        background-clip: text;


        @media (min-width: 768px) {
            font-size: 3rem;
        }
    }

    p {
        margin: unset;
        margin-bottom: 2rem;

        font-size: 1.125rem;
        text-align: center;

        color: var(--color-text-secondary);

        @media (min-width: 768px) {
            font-size: 1.25rem;
        }
    }

    div {
        display: grid;
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        gap: 2rem;
        justify-content: center;

        @media (min-width: 768px) {
            grid-template-columns: repeat(2, minmax(0, 25rem));
						grid-auto-rows: auto auto;
        }

        @media (min-width: 1024px) {
            grid-template-columns: repeat(3, minmax(0, 25rem));
        }
    }
</style>