<template>
  <div class=" flex items-center justify-between mb-[12px]">
    <div class="left flex items-center">
      <span class="text-[12px] text-ink-400 mr-[4px]">{{ t("common.dateRange.checkIn") }}</span>
      <span class="text-[12px] text-[#171717] mr-16">
        {{ selectedDate.startDate }}
      </span>
      <span class="total rounded-[5px] flex items-center text-[11px] color-43669A relative">{{
        selectedDate.totalDays }}{{ t("common.dateRange.nights") }}</span>
      <span class="text-[12px] text-ink-400 ml-16">{{ t("common.dateRange.checkOut") }}</span>
      <span class="text-[12px] text-[#171717] ml-[4px]">
        {{ selectedDate.endDate }}
      </span>
    </div>
    <div class="flex items-center" v-if="showBtn" @click="emit('click')">
      <span class="text-[12px] text-[#2D91FF] leading-[16px]">{{ t("common.dateRange.roomDetails") }}</span>
      <van-icon name="arrow" size="15" color="#99A0AE" />
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from "vue";
import { useI18n } from "vue-i18n";

const { t } = useI18n();

// Props
const props = defineProps({
  selectedDate: {
    type: Object,
    default: () => {
      return {
        startDate: "",
        endDate: "",
      };
    },
  },
  showBtn: {
    type: Boolean,
    default: false,
  },
});
const emit = defineEmits(["click"]);
</script>

<style scoped lang="scss">
.total {
  border: 1px solid #43669a;
  padding: 3px 6px;

  &::after,
  &::before {
    content: "";
    width: 8px;
    height: 1px;
    position: absolute;
  }

  &::before {
    background: linear-gradient(270deg,
        rgba(67, 102, 154, 1),
        rgba(67, 102, 154, 0));
    left: -9px;
  }

  &::after {
    background: linear-gradient(270deg,
        rgba(67, 102, 154, 0),
        rgba(67, 102, 154, 1));
    right: -9px;
  }
}
</style>
