<template>
  <div class="flex items-center">
    <div
      class="h-9 flex-row flex items-center bg-white px-2.5"
      style="border-radius: 9px"
      v-if="active"
    >
      <Icon color="#4E61C9" :name="iconName" size="23" />
      <span class="ml-2 tabText text-app-blue">{{ tabName }}</span>
    </div>
    <div v-else>
      <Icon color="#A3ABE0" :name="iconName" size="23" />
    </div>
  </div>
</template>

<script>
import Icon from "@/components/common/Icon";
export default {
  props: ["tabName", "iconName", "active"],
  components: {
    Icon,
  },
};
</script>

<style>
.tabText {
  font-size: 10px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #3e4faf;
  line-height: 14px;
}
</style>