<template>
  <div
    class="c-title flex items-center pl-3.5 bg-white text-darkBlue font-bold text-sm"
  >
    <div
      class="text-sm font-bold relative mr-7"
      :class="[
        tab.value === focusedTab ? ' text-footer-color' : ' text-text-color',
      ]"
      @click="setFocusedTab(tab.value)"
      v-for="(tab, i) in tabList"
      :key="i"
    >
      {{ tab.name }}
      <div
        v-if="tab.value === focusedTab"
        class="absolute -bottom-1 left-1/2 -translate-x-1/2 transform bg-footer-color"
        style="width: 14px; height: 2px;"
      ></div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue, { PropType } from 'vue'
export default Vue.extend({
  props: {
    focusedTab: String,
    setFocusedTab: Function,
    tabList: Array as PropType<
      {
        name: string
        value: string
      }[]
    >,
  },
})
</script>
<style lang="scss" scoped>
.c-title {
  height: 50px;
}
</style>
