<template>
  <div class="rounded-xl px-6 py-5" :class="classes">
    <div class="pb-5" v-if="title">
      <div class="text-lg font-semibold text-gray-900">
        {{ title }}
      </div>
      <div class="text-sm text-gray-600" v-if="supporting_text">
        {{ supporting_text }}
      </div>
    </div>
    <slot></slot>
  </div>
</template>
<script setup>
import { defineProps } from "vue";

const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  supporting_text: {
    type: String,
    default: "",
  },
  classes: {
    type: String,
    default: "bg-gray-50 p",
  }
});
</script>
