<script setup lang="ts">
const { runningOrder, country, artist, title, flag, artistID } = defineProps(['runningOrder', 'country', 'artist', 'title', 'flag', 'artistID'])
const config = useRuntimeConfig()
const apiBase = config.public.apiBase
</script>

<template>
    <NuxtLink :to="`/review/${artistID}`">
    <div class="flex gap-4 border border-slate-200 justify-between overflow-clip items-center rounded-2xl ArtistCard">
        <h2 class="w-1/4 text-center text-slate-300 text-3xl md:text-6xl">{{ runningOrder }}</h2>
        <div class="flex flex-col w-1/2">
            <h2>{{ country }}</h2>
            <p class="flex md:gap-2 text-xs md:text-lg flex-col md:flex-row">
                <span class="font-semibold">{{ artist }}</span>
                <span class="italic">{{ title }}</span>
            </p>
        </div>
        <img :src="`${apiBase}/static/flags/${flag.toLowerCase()}.webp`" class="w-1/4" />
    </div>
    </NuxtLink>
</template>

<style>
    .ArtistCard {
        background-color: rgba(255, 255, 255, 0.2);
    }
</style>
    