<script setup>
defineProps({
  image: {
    type: String,
    required: true,
  },
  label: {
    type: String,
    required: true,
  },
  title: {
    type: String,
    required: true,
  },
  description: {
    type: String,
    required: true,
  },
  button: {
    type: Object,
    label: String,
    color: String,
    default: () => ({
      label: "Get started",
      color: "btn-white",
    }),
  },
});
</script>
<template>
  <div class="cursor-pointer">
    <div class="card card-background">
      <div
        class="full-background"
        :style="{ backgroundImage: `url(${image})` }"
        loading="lazy"
      ></div>
      <div class="card-body pt-7 text-center">
        <p class="text-white text-uppercase">{{ label }}</p>
        <h3 class="text-white mb-0">{{ title }}</h3>
        <p class="text-white opacity-8">
          {{ description }}
        </p>
        <button type="button" class="btn btn-sm mt-3" :class="button.color">
          {{ button.label }}
        </button>
      </div>
    </div>
  </div>
</template>