<script setup lang="ts">
import { useRouter } from 'vue-router'

import type { Artist } from '~/types'

const play = defineEmit<[artist: Artist]>()

interface Props {
  artist: Artist;
}

const props = defineProps<Props>()

const { artist } = props

let navigate = () => {}

if (import.meta.env.PROD) {
  const router = useRouter()
  navigate = () =>
    router.push({ name: 'library.artists.detail', params: { id: artist.id } })
}
const image = artist.cover
  ? artist.cover.urls.original
  : `${import.meta.env.BASE_URL}embed-default-cover.jpeg`
</script>

<template>
  /Users/arnology/Sites/funkwhale/funkwhale/front/src/components/artist/Card.vue
  <fw-card
    :title="artist.name"
    :image="image"
    :tags="artist.tags"
    @click="navigate"
    class="artist-card"
  >
    <fw-play-button @play="play(artist)" />

    <template #footer>
      {{ $t("components.audio.artist.Card.meta.tracks", artist.tracks_count) }}
      <fw-options-button />
    </template>
  </fw-card>
</template>

<style lang="scss">
@import "./style.scss";
</style>
