<script setup lang="ts">
const props = defineProps({
  title: {
    type: String,
    required: true,
  },
  subtitle: {
    type: String,
    required: false,
  },
  bubble: {
    type: Boolean,
    default: true,
  },
})
</script>

<template>
  <div class="relative font-sans select-none">
    <h1
      v-if="subtitle"
      class="text-base text-neutral-300 italic tracking-wide font-black leading-none"
    >{{ subtitle }}</h1>

    <h1 class="text-xl font-bold text-neutral-700 leading-none relative z-[1]">
      {{ title }}
    </h1>

    <div
      v-if="bubble"
      class="absolute -left-1.5 -bottom-1.5 w-4 h-4 rounded-full bg-primary-500/50 z-[0]"
    ></div>
  </div>
</template>

<style scoped>

</style>