<template>
  <div class="card">
    <div class="card-header pb-0">
      <h6 class="mb-0">Adresse de facturation</h6>
    </div>
    <div class="card-body">
      <div class="row">
        <div class="col-12">
          <label class="form-label">Adresse ligne 1</label>
          <p class="form-control-static text-sm">
            {{ client.billing_address_line1 || "-" }}
          </p>
        </div>
        <div class="col-12 mt-3">
          <label class="form-label">Adresse ligne 2</label>
          <p class="form-control-static text-sm">
            {{ client.billing_address_line2 || "-" }}
          </p>
        </div>
        <div class="col-md-4 mt-3">
          <label class="form-label">Code postal</label>
          <p class="form-control-static text-sm">
            {{ client.billing_postal_code || "-" }}
          </p>
        </div>
        <div class="col-md-4 mt-3">
          <label class="form-label">Ville</label>
          <p class="form-control-static text-sm">
            {{ client.billing_city || "-" }}
          </p>
        </div>
        <div class="col-md-4 mt-3">
          <label class="form-label">Pays</label>
          <p class="form-control-static text-sm">
            {{ client.billing_country_code || "-" }}
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps } from "vue";
defineProps({
  client: {
    type: Object,
    required: true,
  },
});
</script>

<style scoped>
.form-control-static {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  margin-bottom: 0;
  min-height: calc(1.5em + 1rem);
}
</style>
