<script setup lang="ts">
const props = defineProps({
  src: {
    type: String,
    required: true,
  },
  alt: {
    type: String,
    default: 'Logo',
  },
  width: {
    type: Number,
    default: 100,
  },
  height: {
    type: Number,
    default: 100,
  },
  title: {
    type: String,
    default: 'Title',
  },
  description: {
    type: String,
    default: 'Description',
  },
})
</script>

<template>
  <NuxtLink
    class="flex flex-row items-center text-inherit hover:text-inherit select-none sm:m-auto lm:m-0 lt:m-0 lg:m-0"
    to="/"
  >
    <img
      class="transition-all"
      draggable="false"
      :width="props.width"
      :height="props.height"
      :src="props.src"
      :alt="props.alt"
    />
    <div>
      <h2>{{ props.title }}</h2>
      <hr class="accent-text accent-gradient border-0 h-px" />
      <p>{{ props.description }}</p>
    </div>
  </NuxtLink>
</template>

<style scoped lang="scss">
a:hover > img {
  transform: scale(105%);
}
</style>
