<template>
  <router-link
    class="vehicle flex items-center cursor-pointer p-3 mb-2 rounded bg-gray-300 hover:bg-gray-400"
    :to="`/vehicles/${vehicle.id}`"
    tag="article"
  >
    <span
      class="mr-2 text-sm rounded-xl px-2 py-1"
      :class="{
        'bg-teal-400': vehicle.vehicle_class === 'Airship',
        'bg-red-400': vehicle.vehicle_class === 'Airplane',
        'bg-orange-400': vehicle.vehicle_class === 'Boat'
      }"
      >{{ vehicle.vehicle_class }}</span
    >
    <h4>{{ vehicle.name }}</h4>
  </router-link>
</template>

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

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