<script setup lang="ts">
defineProps<{
  name: string
  type: 'indoor' | 'outdoor'
}>()
</script>

<template>
<div class="rounded-lg bg-white flex-grow flex justify-between overflow-hidden">
  <div class="py-4 px-6 text-center flex-grow">
    {{ name }}
  </div>
  <div
    class="px-4 flex items-center justify-center"
    :class="{
      'bg-yellow-400': type === 'indoor',
      'bg-lime-500': type === 'outdoor'
    }"
  >
    <Icon
      :name="type === 'indoor' ? 'bi:house' : 'bi:tree'"
      class="text-white"
    ></Icon>
  </div>
</div>
</template>
