<script setup>
import {ref} from 'vue';
import {setRandomBGCL} from "../utils/randomBGCL.js";

const props = defineProps({
  tool: Object
});

const hover = ref(false);
</script>

<template>
  <router-link :to="'/tools/'+tool.id">
    <div
        class="tool-box"
        @mouseover="hover = true"
        @mouseleave="hover = false"
    >
      <div class="image-container" :style="{background: setRandomBGCL(tool.title)}">
        <div class="cover-character">{{ tool.title[0] }}</div>
        <img v-if="tool.image" :src="tool.image" :alt="tool.title"/>
      </div>
      <div class="text"><h3>{{ tool.title }}</h3>
        <p>{{ tool.description }}</p></div>
      <div class="text-background">

      </div>
    </div>
  </router-link>
</template>

<style scoped>
.tool-box {
  position: relative;
  width: 170px;
  height: 225px;
  border: cyan solid 1px;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
}

.theme-light .tool-box {
  border: #ffb74d solid 1px;
}

.tool-box:hover {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  transform: translateY(-10px);
}

.image-container {
  width: 100%;
  height: 100%;
}

.image-container .cover-character {
  width: 100%;
  height: 100%;
  font-size: 200px;;
  font-family: 'huangkaihua', Tahoma, Geneva, Verdana, sans-serif;
  color: gray;
  mix-blend-mode: difference;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: filter 0.3s ease;
}

.text-background {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 20px;
  background: linear-gradient(to top, black, transparent);
  color: white;
  text-align: center;
  box-sizing: border-box;
  transition: all 0.3s ease;
}

.text {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 20px;
  background: linear-gradient(to top, black, transparent);
  color: white;
  text-align: center;
  box-sizing: border-box;
  z-index: 10;
}

.text h3 {
  margin: 0;
  font-size: 18px;
  white-space: nowrap;
  transition: transform 0.3s ease;
}

.text p {
  margin: 0;
  font-size: 12px;
  transition: transform 0.3s ease;
}

.tool-box:hover .text-background {
  background: linear-gradient(to top, black 60%, transparent);
  transform: scaleY(5);
}

.tool-box:hover h3 {
  transform: translateY(-10px);
}

.tool-box:hover p {
  transform: translateY(-5px);
}

</style>
