<template>
  <header>
    <div v-if="headerChat" id="header-chat">
      <div class="chat-picture">
        <figure>
          <img src="chat-picture" alt="The chat picture" />
        </figure>
      </div>
      <div class="chat-name">
        <h3>{{ chatName }}</h3>
      </div>
    </div>
    <div v-else>
      <div id="header">
        <p>Geografia</p>
      </div>
    </div>
  </header>
</template>

<script>
export default {
  setup() {},
  props: {
    ChatPicture: { type: String, default: "" },
    chatName: { type: String, default: "" },
    headerChat: { type: Boolean, default: true },
  },
};
</script>

<style scoped></style>
