<template>
  <div class="bg-gray-50 rounded-xl p-6">
    <div class="text-lg pb-6 font-semibold text-gray-900 border-b border-gray-200">{{ dataRef.name }}</div>
    <div class="flex flex-col gap-3 py-6 text-gray-600">
      <div class="font-semibold text-gray-900">Content</div>
      <p>The tabs will be automatically populated with the 5 types of memberships.</p>
    </div>
  </div>
</template>
<script setup>
import {ref} from "vue";
import {defaultProps} from "@/components/helpers/defaultProps";

const props = defineProps({
  ...defaultProps,
});

const dataRef = ref(props.data.component);
console.log('componentData', dataRef)

</script>
