<template>
  <section >

      <div v-for="user in customers" :key="user.id">
          <router-link   :to="{ name: 'customerProfile', params: { id: user['id'] } }">
        <div class="grid grid-cols-12 bg-neutral pb-5 hover:bg-accent ">
        <div class="col-span-12">     {{ user['customer_first_name'] }} {{ user['customer_last_name'] }}</div>
        <div class="col-span-12">
          {{ user['customer_address'] }} {{ user['customer_town'] }} {{user.state}}
        </div>
        <div class="col-span-12"> {{user['customer_phone_number']}}</div>
     
        <div class="col-span-12"> {{user['account_number']}}</div>
        </div>
      </router-link>

        <hr/>
      </div>


  </section>
</template>


<script lang="ts">


import {defineComponent} from "vue";

export default defineComponent({
  name: "SearchResults",
  props: ["customers"],

});
</script>

