<script setup>
const props = defineProps({
  list: {
    default() {
      return [];
    },
  },
  noDataText: {
    default: "نتیجه‌ای یافت نشد!",
  },
  noDataIcon: {
    default: "/img/haditha/no-data.png",
  },
});

const router = useRouter();

const goToLibraryShow = (item) => {
  router.push({
    name: "hadithaLibraryShow",
    params: {
      id: item?._source?.id,
      slug: item?._source?.title,
    },
    query: {
      firstPage: item._source.page_first,
    },
  });
};
</script>

<template>
  <UCard
    v-for="(item, index) in props.list"
    class="mx-auto"
    :key="index"
    variant="solid"
    :ui="{
      root: 'ring ring-[white] divide-y divide-[var(--ui-border)] rounded-0 shadow-none bg-transparent library-list-item',
      header: 'header',
      body: 'sm:p-0 p-0 bg-transparent',
      footer: 'footer',
    }"
  >
    <!-- <template #header></template> -->

    <ULink
      :to="{
        name: 'hadithaLibraryShow',
        params: {
          id: item?._source?.id,
          slug: item?._source?.title,
        },
      }"
      color="neutral"
      variant="outline"
      :ui="{
        leadingIcon: 'text-(--ui-primary)',
      }"
    >
      <img
        fit="auto"
        quality="80"
        placeholder
        src="/img/haditha/library/totally.webp"
      />
      <!-- src="/img/haditha/sample-bgi.svg" -->
      <p class="title">{{ item?._source?.title }}</p>
      <p class="version">
        جلد
        {{ item?._source?.vol_title + item?._source?.vol_num }}
      </p>
    </ULink>

    <!-- <template #footer> </template> -->
  </UCard>
</template>

<style scoped>
.library-list-item {
  width: 140;
  height: 200;
  border-radius: 8px;

  .title {
    margin-top: 0.7em;
    font-family: var(--font);
    font-weight: 400;
    font-size: 13px;
    line-height: 19.5px;
    letter-spacing: 0%;
    text-align: right;
    color: #444444;
  }

  .version {
    font-family: var(--font);
    font-weight: 400;
    font-size: 10px;
    line-height: 15px;
    letter-spacing: 0%;
    text-align: right;
    color: #444444;
  }
  @media screen and (max-width: 719.99px) {
    .library-list {
      height: calc(100dvh - 13em);
    }

    .page-header {
      margin-top: 4em;
      margin-right: 2em;
      margin-bottom: 1em;
    }
  }
}
</style>
