<template>
    <div class="tour-aside chamfer" v-show-on-intersect="{type:'fade-up'}">
        <h3 class="aside-title">Quick Facts</h3>
        <ul class="facts">
            <li v-if="tour.tour_days?.length > 0">
                <span class="label">Length</span>
                <span class="value">{{ tour.tour_days?.length }} days</span>
            </li>
            <li v-if="tour.level">
                <span class="label">Fitness</span>
                <span class="value">{{ tour.level }}</span>
            </li>
            <li v-if="true">
                <span class="label">Price From</span>
                <span class="value">{{
                        Intl.NumberFormat(undefined, {
                            style: 'currency',
                            currency: 'USD'
                        }).format(tour.price)
                    }}</span>
            </li>
            <li v-if="tour.min_people || tour.max_people">
                <span class="label">Group Size</span>
                <span class="value">{{ tour.min_people ?? '?' }}–{{ tour.max_people ?? '?' }} people</span>
            </li>
            <li v-if="Array.isArray(tour.countries) && tour.countries.length">
                <span class="label">Countries</span>
                <span class="value">{{ tour.countries?.map((c: any) => c.name ?? c).join(', ') }}</span>
            </li>
            <li class="departures-item">
                <span class="label">Departures</span>
                <span class="value">No Upcoming Departures</span>
            </li>
        </ul>
    </div>
</template>

<script setup lang="ts">
import {defineProps} from "vue";
import type {Tour} from "@/types";

defineProps<{ tour: Tour }>();
</script>

<style scoped>
.tour-aside {
    background: var(--card);
    color: var(--foreground);
    border: 1px solid color-mix(in oklab, var(--foreground), transparent 85%);
    padding: 1.25rem;
    flex-grow: 1;
    height: 100%;
}

.aside-title {
    margin: 1rem 0 1rem 0;
    font-size: 1rem;
    color: var(--foreground);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.facts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}

.facts li {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    padding: 0.5rem 0.25rem;
    border-bottom: 1px dashed color-mix(in oklab, var(--foreground), transparent 90%);
}

.facts .label {
    color: var(--muted-foreground);
}

.facts .value {
    color: var(--foreground);
    font-weight: 600;
    text-align: right;
}

/* Mobile responsive */
@media (max-width: 1023px) {
    .tour-aside {
        padding: 2em 0.75em 0 2em;
    }

    .aside-title {
        margin: 0 0 0.5rem 0;
        font-size: 0.65rem;
        font-weight: 700;
    }

    .aside-title:not(:first-of-type) {
        margin-top: 0.5rem;
    }

    .facts {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
        margin-bottom: 0.5rem;
    }

    .facts li {
        display: flex;
        flex-direction: column;
        gap: 0.125rem;
        padding: 0;
        border-bottom: none;
    }

    .departures-item {
        grid-column: span 2;
    }


    .facts .label {
        font-size: 0.65rem;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        font-weight: 600;
    }

    .facts .value {
        font-size: 0.8rem;
        text-align: left;
    }

    .aside-title:first-of-type {
        display: none;
    }

    @media (min-width: 768px) {
        .aside-title:first-of-type {
            display: block;
        }

        .facts {
            grid-template-columns: 1fr auto;
        }

        .facts li {
            display: grid;
            grid-template-columns: auto;
            border-bottom: 1px dashed color-mix(in oklab, var(--foreground), transparent 90%);
            padding: 0.5rem 0.25rem;
        }


    }
}
</style>
