<script setup>
import { mdiCog } from '@mdi/js'
import { useSlots, computed } from 'vue'
import BaseIcon from '@/Components/BaseIcon.vue'
import BaseButton from '@/Components/BaseButton.vue'
import IconRounded from '@/Components/IconRounded.vue'

defineProps({
  icon: {
    type: String,
    default: null
  },
  title: {
    type: String,
    required: true
  },
  main: Boolean
})

const hasSlot = computed(() => useSlots().default)
</script>

<template>
  <section 
    :class="{'pt-6':!main}"
    class="mb-6 flex items-center justify-between"
  >
    <div class="flex items-center justify-start">
      <IconRounded
        v-if="icon && main"
        :icon="icon"
        type="light"
        class="mr-3"
        bg
      />
      <BaseIcon
        v-else-if="icon"
        :path="icon"
        class="mr-2"
        size="20"
      />
      <h1
        :class="main ? 'text-3xl' : 'text-2xl'"
        class="leading-tight"
      >
        {{ title }}
      </h1>
    </div>
    <slot v-if="hasSlot" />
    <BaseButton
      v-else
      :icon="mdiCog"
      small
    />
  </section>
</template>
