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

<template>
  <div class="library-list-contianer">
    <div class="page-header flex items-center">
      <span class="title">کتابخانه</span>
      <NuxtImg
        fit="auto"
        quality="80"
        placeholder
        src="/img/haditha/haditha-title.svg"
      />
    </div>

    <div class="library-list grid grid-cols-5 gap-x-28 gap-y-12">
      <UCard
        v-if="props.list.length"
        v-for="(item, index) in props.list"
        :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:1,
              slug:'اصول کافی-جلد 1'
            }
          }"
          color="neutral"
          variant="outline"
          :ui="{
            leadingIcon: 'text-(--ui-primary)',
          }"
          @click=""
        >
          <NuxtImg
            fit="auto"
            quality="80"
            placeholder
            src="/img/haditha/sample-bgi.svg"
          />
          <p class="title">اصول کافی</p>
          <p class="version">جلد 1</p>
        </ULink>
        <!-- <template #footer> </template> -->
      </UCard>

      <no-data
        class="h-full w-full flex flex-col justify-center items-center"
        v-else
      >
        <NuxtImg fit="auto" quality="80" placeholder :src="props.noDataIcon" />
        <p class="no-data-text">{{ props.noDataText }}</p>
      </no-data>
    </div>
  </div>
</template>

<style scoped>
.library-list-contianer {
  margin-top: 10em;
  max-width: 1200px;
  width: 100%;
  margin: 0 1em;
  margin-right: auto;
  margin-left: auto;

  .page-header {
    margin-bottom: 2em;
    .title {
      margin-left: 0.4em;
      font-family: IRANSansX;
      font-weight: 300;
      font-size: 24px;
      line-height: 36px;
      letter-spacing: 0%;
      text-align: center;

      color: var(--ui-color-two);
    }
  }

  .library-list {
    /* padding: 1em 1.3em; */
    height: calc(100dvh - 13.5em);
    overflow-y: auto;

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

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

      .version {
        font-family: IRANSansX;
        font-weight: 400;
        font-size: 10px;
        line-height: 15px;
        letter-spacing: 0%;
        text-align: right;
        color: #444444;
      }
    }
  }
  .no-data-text {
    font-family: IRANSansX;
    font-weight: 300;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    text-align: center;
  }
}
</style>
