<template>
  <ion-card button @click="$router.push('/products/'+product.id)" :class="product.stock ? 'bg-blue-50 border-blue-100' : 'bg-red-50 border-red-100'"
    class="rounded-2xl border m-0 aspect-square relative">
    <div class="h-full w-full flex flex-col justify-between items-center absolute p-4">
      <div class="flex-1 flex items-center">
        <div class="font-bold text-xl mb-2 text-center text-neutral-800">
          {{ product.name }}
        </div>
      </div>

      <div class="h-fit font-medium p-1 rounded-full bg-neutral-800 w-full flex items-center">
        <div class="h-full aspect-square rounded-full" :class="product.stock ? 'bg-green-400' : 'bg-red-400'">
        </div>
        <div class="py-1 pl-2 text-neutral-200 text-xs">
          {{ product.stock > 0 ? `Ready ${product.stock} Unit` : 'No Stock' }}
        </div>
      </div>
    </div>
  </ion-card>
</template>

<script setup>
import { IonCard } from '@ionic/vue'
defineProps({
  product: Object
})
</script>