<script setup lang="ts">
const { runningOrder, country, artist, title, flag, artistID } = defineProps(['runningOrder', 'country', 'artist', 'title', 'flag', 'artistID'])
</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-6xl">{{ runningOrder }}</h2>
        <div class="flex flex-col w-1/2">
            <h2>{{ country }}</h2>
            <p class="flex md:gap-2 text-sm flex-col md:flex-row">
                <span class="font-bold">{{ artist }}</span>
                <span class="italic">{{ title }}</span>
            </p>
        </div>
        <img class="w-1/4" src="https://placehold.co/100" alt="{{ flag }}">
    </div>
    </NuxtLink>
</template>

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