<template>
  <RouterLink :to="routeLink">
    <div
      class="hoverbox relative flex h-60 flex-col overflow-hidden rounded-lg bg-gray-50 shadow-lg ring-1 ring-black ring-opacity-5 transition-all duration-500 hover:scale-105 md:h-80"
    >
      <img v-if="image" :src="image" class="absolute object-cover" />
      <div class="z-10 mt-auto flex flex-col bg-white px-4 py-4">
        <span class="text-lg font-bold">{{ title }}</span>
        <span class="text-sm" v-if="subtitle">{{ subtitle }}</span>
      </div>
    </div>
  </RouterLink>
</template>

<script setup lang="ts">
import { RouteLocationRaw } from 'vue-router';

const props = defineProps<{
  image?: string;
  title: string;
  routeLink: RouteLocationRaw;
  subtitle?: string;
}>();
</script>

<style scoped lang="scss">
.hoverbox {
  img {
    transition: all 3s;
  }

  &:hover {
    img {
      transform: scale(1.3);
    }
  }
}
</style>
