<template>
  <div class="grid grid-cols-1 gap-4">
    <div class="form-control">
      <label class="label">
        <span class="label-text">Nom du contact</span>
      </label>
      <input
        v-model="form.contactName"
        type="text"
        placeholder="Nom et prénom"
        class="input input-bordered"
        required
      />
    </div>

    <div class="form-control">
      <label class="label">
        <span class="label-text">Téléphone</span>
      </label>
      <input
        v-model="form.contactPhone"
        type="tel"
        placeholder="Ex: 06 00 00 00 00"
        class="input input-bordered"
        required
      />
    </div>

    <div class="form-control">
      <label class="label">
        <span class="label-text">Adresse</span>
      </label>
      <input
        v-model="form.contactAddress"
        type="text"
        placeholder="Adresse complète"
        class="input input-bordered"
        required
      />
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
      <div class="form-control">
        <label class="label">
          <span class="label-text">Code postal</span>
        </label>
        <input
          v-model="form.contactPostalCode"
          type="text"
          placeholder="Code postal"
          class="input input-bordered"
          required
        />
      </div>

      <div class="form-control">
        <label class="label">
          <span class="label-text">Ville</span>
        </label>
        <input
          v-model="form.contactCity"
          type="text"
          placeholder="Ville"
          class="input input-bordered"
          required
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { toRefs } from 'vue'
import type { PropType } from 'vue'

type SiteForm = {
  contactName: string
  contactPhone: string
  contactAddress: string
  contactPostalCode: string
  contactCity: string
}

const props = defineProps({
  form: {
    type: Object as PropType<SiteForm>,
    required: true,
  },
})

const form = toRefs(props.form)
</script>

<!--
  Bloc de formulaire partagé pour la saisie/édition des informations de contact d'un site.
  Utilisation :
  <SiteContactFormFields :form="siteForm" />
-->
