<template>
  <router-link
    class="location flex items-center cursor-pointer p-3 mb-2 rounded bg-gray-300 hover:bg-gray-400"
    :to="`/locations/${location.id}`"
    tag="article"
  >
    <span class="mr-2 text-sm rounded-xl px-2 py-1">{{
      location.terrain
    }}</span>
    <h4>{{ location.name }}</h4>
  </router-link>
</template>

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

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