<script lang="ts">
    import MedialibImage from "../../widgets/MedialibImage.svelte"

    export let item: {
        image: string
        title: string
        descriptions: string[]
    }
    export let i: number
    export let isMobile: boolean
</script>

<li>
    <div class="image-wrapper">
        <MedialibImage id={item.image} />
        <h3>
            {i + 1}
        </h3>
    </div>
    <div class="content">
        <div class="title-row">
            <h4>
                {item.title}
            </h4>

            <svg
                xmlns="http://www.w3.org/2000/svg"
                width={isMobile ? 58 : 72}
                height={isMobile ? 58 : 72}
                viewBox="0 0 {isMobile ? 58 : 72} {isMobile ? 58 : 72}
                fill="none"
            >
                <path
                    d="M0 {isMobile ? 58 : 72}V0L{isMobile ? 58 : 72} {isMobile ? 58 : 72}H0Z"
                    fill="#EB5757"></path>
            </svg>
        </div>
        <div class="descriptions">
            <ul>
                {#each item.descriptions as description}
                    <li>
                        {description}
                    </li>
                {/each}
            </ul>
        </div>
    </div>
</li>
