<template>
  <div
    :class="{
      'vc-card--hover': hovered
    }"
    class="vc-card"
  >
    <div class="vc-card-content">
      <slot />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'VcCard',
  props: {
    hovered: {
      type: Boolean,
      default: false
    },
    dataTestName: {
      type: String,
      default: 'vc-card'
    }
  }
})
</script>

<style lang="scss" scoped>
.vc-card {
  @apply
  relative
  w-full
  bg-white
  transition-all
  duration-300
  ease-in
  rounded-md
  shadow-card;

  &--hover {
    @apply md:hover:shadow-hover-outer cursor-pointer;
  }

  .vc-card-content {
    @apply h-full w-full;
  }
}
</style>
