<template>
  <div class="jobs-modal-header-customs-container">
    <div class="header-item">
      <BaseText>{{ $_tr('date') }}</BaseText>

      <IconText icon="calendar" size="xs">
        {{ $_formatDate(start) }}
      </IconText>
    </div>

    <div class="header-item">
      <BaseText>{{ $_tr('location') }}</BaseText>

      <IconText icon="pin" size="xs">
        {{ location }}
      </IconText>
    </div>
  </div>
</template>

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

export default {
  name: 'JobsModalHeaderCustoms',
  $_i18nRootPath: 'customs.JOBS.MODAL',
  components: {
    IconText,
    BaseText
  },
  props: {
    start: {
      type: String,
      required: true
    },
    location: {
      type: String,
      required: true
    }
  }
}
</script>

<style lang="scss">
@use '@inside-library/styles/mixins/partials/common-mixin' as *;

.jobs-modal-header-customs-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-m) var(--spacing-xl);
  margin-top: var(--spacing-m);

  @include box-shadow;

  .header-item {
    width: calc(50% - 24px);
    padding-left: var(--spacing-l);
    border-left: 1px solid var(--color-primary-200);

    &:first-child {
      padding-left: var(--spacing-0);
      border-left: none;
    }
  }
}
</style>
