<script setup lang="ts">
import DeadlineTable from '~/components/deadline/DeadlineTable.vue'
import NewDeadline from '~/components/modal/NewDeadline.vue'

const props = defineProps<{
  book: BookRecommendation
}>()

const auth = useAuthStore()
const { $storage } = useNuxtApp()
const dayjs = useDayjs()
</script>

<template>
  <UCard class="my-4">
    <div class="flex w-full justify-between md:space-x-8 lg:space-x-4">
      <div class="hidden w-1/5 md:block">
        <img :src="$storage(props.book.cover_image)" :alt="props.book.book_name" class="rounded-lg">
      </div>
      <div class="w-full space-y-4 md:w-4/5">
        <div class="space-y-2">
          <h1 class="font-sans text-3xl font-bold">
            {{ props.book.book_name }}
          </h1>
          <div class="flex flex-col flex-wrap gap-y-2 md:flex-row md:justify-between">
            <div>
              <UBadge>
                {{ props.book.author }}
              </UBadge>
            </div>
            <div class="flex">
              <ClientOnly>
                <NewDeadline v-if="auth.user?.roles.includes('admin')" :book-recommendation-id="props.book.id" />
              </ClientOnly>
            </div>
          </div>
        </div>
        <UDivider />
        <div class="space-y-2">
          <p class="font-sans text-xl font-bold ">
            Beschreibung
          </p>
          <p class="w-full text-lg md:w-3/5">
            {{ props.book.description }}
          </p>
        </div>
        <div class="flex flex-col flex-wrap justify-start gap-x-32 gap-y-4 pt-4 md:flex-row">
          <div>
            <p class="font-sans text-lg font-bold ">
              Seiten
            </p>
            <p class="text-lg">
              {{ props.book.pages }}
            </p>
          </div>
          <div>
            <p class="font-sans text-lg font-bold">
              Erstveröffentlichung
            </p>
            <p class="text-lg">
              {{ dayjs(props.book.published_at).format('MMM YYYY') }}
            </p>
          </div>
          <div>
            <p class="font-sans text-lg font-bold">
              Empfohlen von
            </p>
            <p class="text-lg">
              {{ props.book.recommender.name }}
            </p>
          </div>
          <div>
            <p class="font-sans text-lg font-bold">
              Votes
            </p>
            <p class="text-lg">
              {{ props.book.votes.length }}
            </p>
          </div>
        </div>
        <div>
          <DeadlineTable :book-recommendation-id="props.book.id" />
        </div>
      </div>
    </div>
  </UCard>
</template>

<style scoped>

</style>
