<template>
  <ion-card
    :class="item.status === 'used' ? 'bg-blue-50 border-blue-100' : item.status === 'ready' ? 'bg-lime-50 border-lime-100' : 'bg-red-50 border-red-100'"
    class="rounded-2xl border m-0">
    <div class="h-full w-full p-4 space-y-2">
      <div class="flex justify-between gap-2">
        <div class="flex flex-col items-center w-full">
          <div>No Seri</div>
          <div
            class="h-fit font-medium p-1 rounded-full bg-white w-full max-w-52 flex items-center justify-center border text-black">
            {{ item.serial }}
          </div>
        </div>

        <div class="flex flex-col items-center w-full">
          <div>Lokasi</div>
          <div
            class="h-fit font-medium p-1 rounded-full bg-white w-full max-w-52 flex items-center justify-center border text-black">
            {{ item.location }}
          </div>
        </div>
      </div>

      <div class="flex justify-between gap-2">
        <div class="flex flex-col items-center w-full">
          <div>Waktu Produksi</div>
          <div
            class="h-fit font-medium p-1 rounded-full bg-white w-full max-w-52 flex items-center justify-center border text-black">
            {{ item.production }}
          </div>
        </div>

        <div class="flex flex-col items-center w-full">
          <div>Status</div>
          <div class="h-fit font-medium p-0 rounded-full bg-white w-full max-w-52 flex items-center border relative">
            <div class="w-5 max-h-full aspect-square rounded-full absolute left-[6px]"
              :class="item.status === 'ready' ? 'bg-green-500' : item.status === 'used' ? 'bg-blue-500' : 'bg-red-500'">
            </div>
            <div class="flex-1 py-1 px-5 text-black text-center">
              {{ item.status === 'ready' ? 'Ready to use' : item.status === 'used' ? 'Digunakan' : 'Maintenance' }}
            </div>
          </div>
        </div>
      </div>

      <div :class="item.status === 'ready' && 'invisible'" class="grid grid-cols-2 gap-2 w-full">
        <div :class="item.status === 'maintenance' && 'invisible'" class="flex flex-col items-center">
          <div class="grid grid-cols-7 items-center w-full max-w-52 px-2">
            <img src="@/assets/images/tools.png" alt="Icon tools" class="w-max aspect-square">
            <div class="col-span-6 h-max font-medium flex flex-col items-center">
              <div>History</div>
              <div class="text-black">
                {{ item.history }}
              </div>
            </div>
          </div>
        </div>
        <div class="flex flex-col items-center">
          <div class="grid grid-cols-7 items-center w-full max-w-52 px-2">
            <img src="@/assets/images/calendar.png" alt="Icon calendar" class="w-max aspect-square">
            <div class="col-span-6 h-max font-medium flex flex-col items-center">
              <div>Installation</div>
              <div class="text-black">
                {{ item.installation }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </ion-card>
</template>

<script setup>
import { IonCard } from '@ionic/vue'
defineProps({
  item: {
    type: {
      serial: String,
      production: String,
      status: String,
      location: String,
      installation: String,
      history: String
    }
  }
})
</script>