<script lang="ts">
    import { slide } from 'svelte/transition';
    import { createAccordion } from '@melt-ui/svelte';
 
    const {
        elements: { content, item, trigger, root },
        helpers: { isSelected }
    } = createAccordion({
        forceVisible: true
    });
 
    type ExampleItem = {
        key: string;
        title: string;
        itemContent: string;
        icon: string;
    }
 
    // From the Avatar wiki: https://avatar.fandom.com/wiki/Bending_arts
     const items: ExampleItem[] = [
        {
            key: 'water',
            title: 'Waterbending',
            itemContent: 'Waterbending is practiced by some people of the Water Tribe. A versatile element, it is unique in the sense that the original bender of the element was not an animal, but rather the Moon.',
            icon: 'i-material-symbols-water-drop-outline-rounded'
        },
        {
            key: 'earth',
            title: 'Earthbending',
            itemContent: 'Earthbending originates in the Earth Kingdom and the first earthbenders were badgermoles, who are said to love music.',
            icon: 'i-mdi-earth'
        },
        {
            key: 'fire',
            title: 'Firebending',
            itemContent: 'Firebending is used by the people of the Fire Nation and is the most aggressive bending art. Dragons were the first firebenders; they subsequently taught the Sun Warriors.',
            icon: 'i-material-symbols-local-fire-department-rounded'
        },
        {
            key: 'air',
            title: 'Airbending',
            itemContent: 'Airbending is the bending art used by the Air Nomads; the flying bison were the original airbenders.',
            icon: 'i-mdi-weather-windy-variant'
        }
    ];
 
</script>
 
<div
    {...$root}
    class="rounded-container flex flex-col gap-1 w-80 md:w-96 surface-50-600 shadow-lg shadow-surface-500/50-300/50 p-2"
>
    {#each items as {key, title, itemContent, icon}}
        <div
            {...$item(key)} use:item
            class="overflow-hidden transition-colors"
        >
            <div>
                <button
                    {...$trigger(key)} use:trigger
                    class="p-4 w-full rounded-container font-semibold leading-none transition-all primary-400 hover:primary-500"
                >
                    <div class="flex justify-left items-center gap-2">
                        <span class="text-lg {icon}" />
                        <span>{title}</span>
                    </div>
                </button>
            </div>
 
            {#if $isSelected(key)}
                <div
                    {...$content(key)} use:content
                    class="content px-2 py-4"
                    transition:slide
                >
                    {itemContent}
                </div>
            {/if}
        </div>
    {/each}
</div>