<template>
  <div class="cpTripLegRouteLayover">
    <p class="cpTripLegRouteLayover__content">
      <cp-icon class="cpTripLegRouteLayover__icon" type="clock" />
      <time :datetime="isoDuration">{{ formattedDuration }}</time>
      {{ config.routeLayover.layover }}
    </p>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

import type { CpTripDetailsConfig } from '@/constants/tripDetails/CpTripDetailsConfig'
import type { TripDuration } from '@/helpers/tripDetails'

import { getFormattedDuration } from '@/helpers/tripDetails'
import CpIcon from './CpIcon.vue'

interface Props {
  config: CpTripDetailsConfig
  duration: TripDuration | null
  locale?: string
}

const props = withDefaults(defineProps<Props>(), {
  locale: 'en',
})

const isoDuration = computed(() => props.duration?.toISO() ?? '')
const formattedDuration = computed(() => getFormattedDuration(props.duration, props.locale))
</script>

<style lang="scss">
.cpTripLegRouteLayover {
  position: relative;

  &__content {
    display: flex;
    padding-left: calc(#{fn.px-to-rem(24)} + #{fn.px-to-rem(12)});
    color: var(--cp-text-secondary);
    padding-block: var(--cp-spacing-2xl);

    time {
      margin-right: var(--cp-spacing-sm);
    }
  }

  &__icon {
    @include mx.square-sizing(18);

    margin-right: var(--cp-spacing-md);
  }

  &::before {
    position: absolute;
    width: fn.px-to-rem(2);
    background-color: var(--cp-border-soft);
    content: '';
    inset: 0 fn.px-to-rem(11);
  }
}
</style>
