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

    import {
        Loading,
        Section,
        Card,
        GridGallery,
        SkillProgress,
        Timeline,
        Collapsible
    } from '@luke-else/component-lib';
</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="[About]">
        <Card>
            <h2 slot="headerLeft">{info.name}</h2>
            <h2 slot="headerRight">{info.job_title}</h2>
            <div slot="content" 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
                    class="[&>*]:underline [&>*]:decoration-2 [&>*]:decoration-transparent [&>*]:hover:decoration-inherit [&>*]:transition-all [&>*]:duration-300 [&>*]:text-green-600"
                >
                    {@html info.about}
                </p>
            </div>
            <h3 slot="footerLeft">{@html info.location}</h3>
        </Card>
    </Section>

    <!-- Skills -->
    <Section label="[Skills]">
        <GridGallery>
            {#each info.skills as skill}
                <Card
                    containerStyle="opacity-100 hover:opacity-100 hover:scale-[105%] md:opacity-70 transition-all duration-300"
                >
                    <h2 slot="headerLeft">{skill.name}</h2>
                    <i slot="headerRight" class="text-slate-300 text-5xl {skill.logo}"></i>
                    <div slot="content">
                        <Collapsible>
                            <span slot="label" class="text-lg">About {skill.name}</span>
                            <span slot="content">{skill.about}</span>
                        </Collapsible>
                        <SkillProgress skillColour={skill.colour} value={skill.competency} />
                    </div>
                    <h3 slot="footerLeft"><a href={skill.link} target="_blank">{skill.link}</a></h3>
                </Card>
            {/each}
        </GridGallery>
    </Section>

    <!-- Experience -->
    <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}
