<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">
        <h2 class="w-1/4 text-center">{{ runningOrder }}</h2>
        <div class="flex flex-col w-1/2">
            <h2>{{ country }}</h2>
            <p class="flex gap-2 text-sm">
                <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>