<template>
  <div class="header">
    <h2 class="title">{{ title }}</h2>
    <p v-if="subtitle" v-html="subtitle" class="subtitle"></p>
    <div class="title-lines"></div>
  </div>
</template>

<script>
export default {
  props: {
    title: { type: String, default: '' },
    subtitle: { type: String, default: '' },
  },
}
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  color: $color-primary;

  .title {
    font-size: $h2;
    color: $color-primary;
    margin-bottom: 10px;
  }

  .subtitle {
    font-size: $l;
    color: $color-primary;
    margin-bottom: 10px;
    text-align: center;
  }

  .title-lines {
    width: 34px;
    height: 2px;
    background: $color-consumo-base;
    margin: 0 8px;
  }
}
</style>
