@props([
    'images' => [],
    'title' => '',
    'location' => '',
    'rating' => '8.3',
    'ratingLabel' => 'Very Good',
    'reviews' => '0 reviews',
    'price' => '',
])

<div class="fluent-card-product" data-fluent-card-slider>

    {{-- MEDIA / SLIDER --}}
    <div class="fluent-card-product__media">

        <div class="fluent-card-product__track">
            @foreach($images as $img)
                <div class="fluent-card-product__slide">
                    <img src="{{ $img }}" />
                </div>
            @endforeach
        </div>

        {{-- OVERLAY GRADIENT --}}
        <div class="fluent-card-product__overlay"></div>

        {{-- NAV --}}
        @if(count($images) > 1)
            <button class="fluent-card-product__nav prev" data-action="prev">
                <x-fluent-icon name="chevron_left" />
            </button>

            <button class="fluent-card-product__nav next" data-action="next">
                <x-fluent-icon name="chevron_right" />
            </button>
        @endif

        {{-- DOTS --}}
        <div class="fluent-card-product__dots" data-dots></div>

        {{-- FAVORITE --}}
        <button class="fluent-card-product__favorite">
            <x-fluent-icon name="heart" />
        </button>

    </div>

    {{-- BODY --}}
    <div class="fluent-card-product__body">

        <div class="fluent-card-product__title">
            {{ $title }}
        </div>

        <div class="fluent-card-product__location">
            {{ $location }}
        </div>

        <div class="fluent-card-product__rating">
            <div class="fluent-card-product__score">{{ $rating }}</div>

            <div>
                <div class="fluent-card-product__label">{{ $ratingLabel }}</div>
                <div class="fluent-card-product__reviews">{{ $reviews }}</div>
            </div>
        </div>

        <div class="fluent-card-product__price">
            <span>Starting from </span>
            <strong>{{ $price }}</strong>
        </div>

    </div>

</div>