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

<template>
  <div class="relative font-sans select-none flex justify-between items-center">
    <div>
      <h1
        v-if="subtitle"
        class="text-base text-neutral-300 dark:text-neutral-600 italic tracking-wide font-black leading-none"
      >{{ subtitle }}</h1>

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

    <div class="flex gap-2.5">
      <slot name="action"/>
    </div>

    <div
      v-if="bubble"
      :class="`bg-${bubbleColor}/50`"
      class="absolute -left-1.5 -bottom-1.5 w-4 h-4 rounded-full z-[0]"
    ></div>
  </div>
</template>

<style scoped>

</style>