<template>
  <section class="nav">
    <header :class="{left: left}">
      <span
        :class="{ arrow: true, close: isCloseable && !left }"
        @click="handleEvent"
      />
      <h1><slot>당근마켓</slot></h1>
      <span
        v-if="hasAction"
        :class="{ action: hasAction, valid: valid }"
        @click="handleAction"
      >{{ actionTitle }}</span>
    </header>
  </section>
</template>

<script>
export default {
  name: 'CuNavbar',
  props: {
    isCloseable: {
      type: Boolean,
      default: false
    },
    left: {
      type: Boolean,
      default: false
    },
    hasAction: {
      type: Boolean,
      default: false
    },
    actionTitle: {
      type: String,
      default: '완료'
    },
    valid: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleEvent () {
      this.isCloseable ? this.$emit('close') : this.$emit('back')
    },
    handleAction (e) {
      this.hasAction && this.valid && this.$emit('click')
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../styles/Navbar.scss";
</style>
