<script setup lang="ts">
interface Props {
  title: string;
  description?: string;
  buttonText?: string;
  showButton?: boolean;
  customStyle?: string;
  titleHeading?: string;
  descriptionCustomStyle?: string;
}

const props = withDefaults(defineProps<Props>(), {
  description: "",
  buttonText: "اشترك الآن",
  showButton: false,
  titleHeading: "h1",
  descriptionCustomStyle: "",
  customStyle: "",
});
</script>

<template>
  <div class="flex flex-col justify-center gap-10 px-4" :class="customStyle">
    <component
      :is="props.titleHeading"
      v-if="props.title"
      class="dark-text-gradient mx-auto max-w-[735px] text-center text-2xl leading-10 font-semibold md:text-4xl md:leading-14 2xl:text-5xl 2xl:leading-16"
    >
      {{ props.title }}
    </component>

    <p
      v-if="props.description"
      class="dark-text-gradient text-center"
      :class="descriptionCustomStyle"
    >
      {{ props.description }}
    </p>

    <Button
      v-if="props.showButton"
      class="mx-auto cursor-pointer"
      variant="wsDefault"
      size="wsDefault"
    >
      {{ props.buttonText }}
    </Button>
  </div>
</template>
