<template>
  <div class="simple-title">
    <slot name="header-icon" />
    <p class="simple-title__text">{{ title }}</p>
  </div>
</template>

<script setup>
defineProps({
  title: { type: String, default: '' },
})
</script>

<style lang="scss" scoped>
.simple-title {
  background: rgba(255, 255, 255, 80%);
  box-shadow: 0 10px 15px -3px rgba(241, 241, 241, 100%);
  padding: 0.875rem;
  margin-bottom: 0.625rem;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.375rem;

  &__text {
    font-family: var(--font-family-fa);
    font-weight: 500;
    font-size: 0.875rem;
    margin: 0;
  }
}
</style>
