<template>
  <div class="text-neutral-lighter grid grid-cols-12">
    <div class="col-span-12 md:col-span-6">
      <div class="mb-2.5 flex">
        <icon icon="tel" class="text-primary-light mr-3 h-6 w-6"></icon>
        <span><b>Téléphone:</b> {{ requester.phone }}</span>
      </div>
    </div>
    <div class="col-span-12 md:col-span-6">
      <div class="mb-2.5 flex">
        <icon icon="tel" class="text-primary-light mr-3 h-6 w-6"></icon>
        <span><b>Téléphone:</b> {{ requester.phone }}</span>
      </div>
    </div>

    <div class="col-span-12 md:col-span-6">
      <div class="mb-2.5 flex">
        <icon icon="info" class="text-primary-light mr-3 h-6 w-6"></icon>
        <span><b>Référence: </b> {{ reference }}</span>
      </div>
    </div>

    <div class="col-span-12 md:col-span-6">
      <div class="mb-2.5 flex">
        <icon icon="info" class="text-primary-light mr-3 h-6 w-6"></icon>
        <span><b>Société:</b> {{ requester.name }}</span>
      </div>
    </div>
    <div class="col-span-12 md:col-span-6">
      <div class="mb-2.5 flex">
        <icon icon="telephone" class="text-primary-light mr-3 h-6 w-6"></icon>
        <span><b>Mobile:</b> {{ requester.mobile }}</span>
      </div>
    </div>

    <div class="col-span-12 md:col-span-6">
      <div class="mb-2.5 flex">
        <div>
          <icon icon="info" class="text-primary-light mr-3 h-6 w-6"></icon>
        </div>
        <div>
          <span
            ><b>Adresse société: </b> {{ requester.address }}
            {{ requester.city.zip_code }} {{ requester.city.name }}</span
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps } from "vue";

const props = defineProps({
  requester: {
    type: Object,
    required: true,
    default: () => ({}),
  },
  reference: {
    type: String,
    required: false,
    default: "",
  },
});
</script>
