<template>
  <v-card class="fc-artistcard" @click="onCardClick">
    <div class="fc-artistcard__previews">
      <img
        v-for="(t, i) in card.preview_thumbnails" :key="i"
        :src="t" alt="" loading="lazy"
      />
      <div v-if="card.preview_thumbnails.length === 0" class="fc-artistcard__noimg">
        No preview
      </div>
    </div>
    <v-card-text class="fc-artistcard__body">
      <div class="fc-artistcard__name">{{ card.name }}</div>
      <div class="fc-artistcard__meta">
        <v-chip
          v-if="card.is_subscription"
          size="x-small" label prepend-icon="mdi-rss"
        >Subscription</v-chip>
        <span v-else />
        <span class="fc-artistcard__count">{{ card.image_count }}</span>
      </div>
    </v-card-text>
  </v-card>
</template>

<script setup>
import { useRouter } from 'vue-router'

const props = defineProps({ card: { type: Object, required: true } })
const router = useRouter()

function onCardClick() {
  router.push({ name: 'artist', params: { slug: props.card.slug } })
}
</script>

<style scoped>
.fc-artistcard { cursor: pointer; }
.fc-artistcard__previews {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 2px; aspect-ratio: 3 / 1;
  /* Explicit floor + ceiling so tall source images can't escape the
     preview slot even on browsers where aspect-ratio doesn't compute. */
  min-height: 150px; max-height: 220px;
  overflow: hidden;
  background: rgb(var(--v-theme-surface-light));
}
.fc-artistcard__previews img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.fc-artistcard__noimg {
  grid-column: 1 / -1; display: flex; align-items: center;
  justify-content: center;
  color: rgb(var(--v-theme-on-surface-variant)); font-size: 12px;
}
.fc-artistcard__body { padding: 8px 12px; }
.fc-artistcard__name { font-weight: 600; }
.fc-artistcard__meta {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 4px;
}
.fc-artistcard__count {
  font-variant-numeric: tabular-nums;
  color: rgb(var(--v-theme-on-surface-variant));
}
</style>
