<template>
  <div class="flex flex-col gap-4" :class="{'items-center': component?.center}">
    <p
        v-if="component?.title"
        class="text-2xl sm:text-3xl lg:text-4xl font-semibold text-white"
        :class="{'!text-gray-900': component?.dark}"
    >{{ component?.title }}</p>
    <p
        v-if="component?.supporting_text"
        class="text-navy-25 text-sm sm:text-base lg:text-xl"
        :class="{'!text-gray-600': component?.dark}"
    >
      {{ component?.supporting_text }}</p>
  </div>
</template>

<script setup>
import {ref} from "vue";

const props = defineProps({
  component: {
    required: true,
    type: Object,
  },
});

const component = ref(props.component);
</script>