<template>
  <RouterLink
    :to="{ name: 'building', params: { id: building.id } }"
    class="flex flex-row items-center space-x-2 px-5 py-3 hover:bg-gray-100"
  >
    <div
      class="flex h-10 w-10 flex-row items-center justify-center rounded-full bg-gray-100"
      :style="{ backgroundColor: building.color }"
    >
      <HomeIcon class="h-6 w-6" />
    </div>
    <div class="flex flex-1 flex-col">
      <span class="text-md font-bold">{{ building.displayName }}</span>
      <span class="text-sm font-light text-gray-800 line-clamp-1">{{
        building.address
      }}</span>
    </div>
    <ChevronRightIcon class="h-4 w-4" />
  </RouterLink>
</template>

<script setup lang="ts">
import { HomeIcon, ChevronRightIcon } from '@heroicons/vue/24/outline';
import { BuildingListItem } from '../../interfaces/building.interfaces';

const props = defineProps<{
  building: BuildingListItem;
}>();
</script>
