<template>
  <div class="carpool-infos-container mt-l">
    <div v-if="moveHour" class="mb-m">
      <Title tag="h5">{{ $_tr('moveHour') }}</Title>
      <BaseText>{{ moveHour }}</BaseText>
    </div>

    <div v-if="departureCity" class="mb-m">
      <Title tag="h5">{{ $_tr('departureCity') }}</Title>
      <BaseText>{{ departureCity }}</BaseText>
    </div>

    <div v-if="arrivalCity">
      <Title tag="h5">{{ $_tr('arrivalCity') }}</Title>
      <BaseText>{{ arrivalCity }}</BaseText>
    </div>
  </div>
</template>

<script>
import { BaseText, Title } from 'inside-collection/atoms'

export default {
  name: 'CarpoolInfos',
  $_i18nRootPath: 'customs.CARPOOLING.MODAL',
  components: {
    BaseText,
    Title
  },
  props: {
    moveHour: {
      type: String
    },
    departureCity: {
      type: String
    },
    arrivalCity: {
      type: String
    }
  }
}
</script>

<style lang="scss">
.carpool-infos-container {
  width: 100%;
}
</style>
