<template>
  <router-link
    class="person flex items-center cursor-pointer p-3 mb-2 rounded bg-gray-300 hover:bg-gray-400"
    :to="`/people/${person.id}`"
    tag="article"
  >
    <span class="mr-2 text-xl font-bold">{{
      person.gender === "Female" ? "&#9792;" : "&#9794;"
    }}</span>
    <h4>{{ person.name }}</h4>
  </router-link>
</template>

<script>
export default {
  name: "Person",
  props: {
    person: {
      type: Object,
      default: {},
      required: true
    }
  }
};
</script>

<style lang="css" scoped></style>
