<script lang="ts">
    import { getJson } from '$lib/data';
    import { toasts } from 'svelte-toasts';

    import Loading from '$lib/components/Loading.svelte';
    import Section from '$lib/components/Section.svelte';
    import Card from '$lib/components/Cards/Card.svelte';
    import FlexGallery from "$lib/components/FlexGallery.svelte";
    import SkillProgress from "$lib/components/SkillProgress.svelte";
    import Timeline from '$lib/components/Timeline.svelte';
</script>

{#await getJson('/json/me.json')}
    <Loading />
{:then info}
    <div style="display: none;">
        {toasts.add({
            title: 'Welcome',
            duration: 5000,
            type: 'success',
            placement: 'bottom-center',
            showProgress: true
        })}
    </div>

    <!-- Main Card -->
    <Section label="[Experience]">
        <Card headerLeft={info.name} headerRight={info.job_title} footer={info.location}>
            <div class="flex flex-row items-center gap-5">
                <img
                    src={info.profile_photo}
                    alt="Avatar"
                    class="max-md:hidden rounded-full w-32 h-32 md:w-48 md:h-48 mt-2 mb-2 p-2 border-3"
                />
                <p>{@html info.about}</p>
            </div>
        </Card>
    </Section>

    <!-- SKills -->
    <Section label="[Skills]">
        <FlexGallery>
            {#each info.skills as skill}
                <Card headerLeft={skill.name} footer={skill.link} containerStyle="flex-1 min-w-[250px] max-w-full md:min-w-[33%] opacity-100 hover:opacity-100 hover:scale-[105%] md:opacity-70 transition-all duration-300">
                    {skill.about}

                    <SkillProgress value={skill.competency} />
                </Card>
            {/each}
        </FlexGallery>
    </Section>

    <Section label="[Experience]">
        <Timeline timelineData={info.timeline} />
    </Section>
{:catch}
    <div style="display: none;">
        {toasts.add({
            title: 'Error',
            description: 'There was an error loading static site data',
            duration: 0,
            placement: 'bottom-center',
            showProgress: true
        })}
    </div>
{/await}
