<script lang="ts">
    import singleRampLeftClosed from "../assets/images/single_ramp_left_closed.jpg";
    import singleRampRightClosed from "../assets/images/single_ramp_right_closed.jpg";
    import threeRampsOpen from "../assets/images/three_ramps_open.jpg";
    import Carousel from "../lib/components/carousel/Carousel.svelte";

    let rampCarouselItems: string[] = [singleRampLeftClosed, singleRampRightClosed, threeRampsOpen];
</script>

<h1 class="text-xl font-semibold md:text-2xl">Tilgjengelighetsfunksjoner</h1>

<section class="mt-4 justify-between gap-5 rounded-md bg-primary-300 p-4 shadow-inner md:flex">
    <div>
        <h2 class="grow text-lg font-semibold md:text-xl">Sitter du i rullestol?</h2>
        <p class="md:text-lg">
            Vi har flere busser med rullestolstøtte, med kapasitet opp til 2 rullestoler per buss.
            <br />Total kapasitet er 5 rullestilbrukere fordelt på 3 busser
        </p>
    </div>
    <div class="md:w-96">
        <Carousel items={rampCarouselItems} buttonClass="bg-primary-200" let:item>
            <div class="h-full w-96 overflow-hidden shadow-sm">
                <img class="card w-full object-cover" src={item} alt="" />
            </div>
        </Carousel>
    </div>
</section>
