<script setup lang="ts">
import { useTimeAgo } from '@vueuse/core'
import { useRouter } from 'vue-router'
import type { Channel } from '~/types'

import OptionsButton from '~/components/ui/button/Options.vue'
import Card from '~/components/ui/Card.vue'

const { podcast } = defineProps<{ podcast: Channel }>()

const timeAgo = useTimeAgo(new Date(podcast.artist?.modification_date ?? new Date()))
</script>

<template>
  <Card
    :title="podcast.uuid"
    :image="podcast.artist?.cover?.urls.original"
    @click="navigate"
    class="podcast-card"
  >
    <a
      @click.stop="navigate"
      class="funkwhale link"
    >
      {{ podcast.artist?.name }}
    </a>

    <template #footer>
      {{ timeAgo }}
      <OptionsButton />
    </template>
  </Card>
</template>

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