<template>
  <div :class="['top-nav', colorClass]">
    <img class="icon" :src="backSrc" alt="back" @click="emitBack" />

    <div class="nav-title">{{ title }}</div>

    <img v-if="showHistory" class="icon-history" :src="historySrc" alt="history" @click="emitHistory" />
  </div>
</template>

<script setup>
import { computed } from 'vue';
import back from '@/assets/images/back_left.png';
import backWhite from '@/assets/images/back_left_white.png';
import history from '@/assets/images/history_line.png';
import historyWhite from '@/assets/images/history_line_white.png';

const props = defineProps({
  title: { type: String, default: '' },
  color: { type: String, default: 'white' }, // 'white' or 'black'
  showHistory: { type: Boolean, default: true }
});

const emit = defineEmits(['back', 'history']);

const emitBack = () => emit('back');
const emitHistory = () => emit('history');

const backSrc = computed(() => (props.color === 'white' ? backWhite : back));
const historySrc = computed(() => (props.color === 'white' ? historyWhite : history));
const colorClass = computed(() => (props.color === 'white' ? 'nav-white' : 'nav-black'));
</script>

<style scoped>
.top-nav {
  position: absolute;
  top: 44px;
  left: 20px;
  right: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 10;
}

.top-nav .icon,
.top-nav .icon-history {
  width: 20px;
  height: 20px;
  cursor: pointer;
  display: block;
}

.nav-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 18px;
  font-weight: 700;
}

.nav-white .nav-title {
  color: #fff;
}

.nav-black .nav-title {
  color: #000;
}
</style>
