<template>
  <div class="flex flex-col space-y-2 p-5" :class="{ 'hovered': isHovered }" @mouseover="handleMouseOver" @mouseleave="handleMouseLeave">
    <h5 class="mt-44 text-2xl font-bold tracking-tight text-gray-900 dark:text-white" v-if="isHovered">{{project.title}}</h5>
    <div class="flex items-center">
      <p class="mb-3 font-normal text-gray-700 dark:text-gray-400" v-if="isHovered">{{project.intro}}</p>
      <button v-if="isHovered" @click="handleButtonClick" class="inline-flex items-center bg-sky-200 text-black rounded-full transition duration-300 ease-in-out transform hover:scale-105">
        <svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
        </svg>
      </button>
    </div>
  </div>
</template>
<script>
export default{
  props:{
    project:{
      type:Object,
      required:true,
    },
  },
  data(){
    return{
      isHovered:false,
    };
  },
  methods:{
    handleMouseOver(){
      this.isHovered = true;
    },
    handleMouseLeave(){
      this.isHovered = false;
    },
    handleButtonClick(){
      console.log('Button Clicked');
    },
  },
};
</script>