<script setup>
const props = defineProps(['person']);
</script>
    
<template>
  <router-link :to="{ name: 'person', params: { id: person.nconst } }" class="person">

    <h3>{{ person.prenom + ' ' + person.nom.toUpperCase() }}</h3>
    <h4>{{ person.birthYear }} {{ person.deathYear }}</h4>
    <h4>{{ person.roles }}</h4>
    <h4 v-if="person.characters">Role : {{ person.characters }}</h4>
  </router-link>
</template>


<style scoped>
.person {
  width: 20%;
  margin: 20px;
  display: inline-block;
  text-align: center;
  padding: 10px;
  border: 1px solid #e6007e;
  border-radius: 25px;
}
</style>