<script setup lang="ts">
export interface VehicleInfo {
  make: string
  model: string
  year: number
  color: string
}

defineProps<{
  vehicle: VehicleInfo | null
  loading: boolean
  notFound: boolean
  plate: string
}>()
</script>

<template>
  <div class="vehicle-info">
    <div v-if="vehicle" class="vehicle-info__card">
      <p class="vehicle-info__card-text">
        {{ vehicle.make }} {{ vehicle.model }} ({{ vehicle.year }}) &mdash;
        {{ vehicle.color }}
      </p>
    </div>
    <div v-else-if="loading" class="vehicle-info__loading">Söker...</div>
    <div v-else-if="notFound" class="vehicle-info__not-found">
      <p>Inget fordon hittades</p>
    </div>
  </div>
</template>

<style scoped>
.vehicle-info {
  margin-top: 0.75rem;
}

.vehicle-info__loading {
  color: #718096;
  font-size: 0.875rem;
}

.vehicle-info__card {
  padding: 1rem;
  background: #f0fff4;
  border: 1px solid #c6f6d5;
  border-radius: 0.5rem;
}

.vehicle-info__card-text {
  margin: 0;
  font-weight: 500;
}

.vehicle-info__not-found {
  padding: 1rem;
  background: #fffaf0;
  border: 1px solid #feebc8;
  border-radius: 0.5rem;
}

.vehicle-info__not-found p {
  margin: 0;
  color: #c05621;
}
</style>
