<script lang="ts">
    import taxis from "../assets/images/taxis.jpg";
    import van from "../assets/images/van.webp";
    import Carousel from "../lib/components/carousel/Carousel.svelte";

    let taxiCarouselItems: string[] = [taxis];
    let packageTaxiCarouselItems: string[] = [van];
</script>

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

<section id="person" 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">Persontaxi</h2>
        <p class="md:text-lg">
            Vi har taxier som dekker de fleste behov.
            <br />Rullestoltransport, firehjulstrekk og helelektrisk bil er noen av tilbudene våre.
            <br />Taxiene våre kan ta opp til 8 passasjerer
        </p>
    </div>
    <div class="md:w-96">
        <Carousel items={taxiCarouselItems} buttonClass="bg-primary-200" let:item>
            <div class="card w-96 overflow-hidden shadow-sm">
                <img class="w-full object-cover" src={item} alt="" />
            </div>
        </Carousel>
    </div>
</section>

<section id="package" 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">Pakketaxi</h2>
        <p class="md:text-lg">Vi har tilbud om pakketaxi. Både småpakker og volumkrevende gods kan transporteres</p>
    </div>
    <div class="md:w-96">
        <Carousel items={packageTaxiCarouselItems} buttonClass="bg-primary-200" let:item>
            <div class="card w-96 overflow-hidden">
                <img class="w-full object-cover" src={item} alt="" />
            </div>
        </Carousel>
    </div>
</section>
