﻿<script setup lang="ts">
import { router } from '@inertiajs/vue3'
import { useAdminMode } from '~/composables/isAdminMode'

const props = defineProps({
  computerId: Number,
  imageSrc: String,
  imageAlt: String,
  title: String,
  description: String,
  cost: Number,
  price: Number,
})

const { isAdminActive } = useAdminMode()

function goToShow() {
  router.get(`/computers/${props.computerId}`)
}
</script>

<template>
  <div
    class="rounded-lg bg-white shadow-secondary-1 dark:bg-surface-dark h-full flex flex-col hover:cursor-pointer"
    @click="goToShow"
  >
    <img class="w-full h-2/3 object-cover" :src="imageSrc" :alt="imageAlt" />
    <div class="flex flex-col justify-between grow px-6 py-2">
      <div class="text-xl font-bold text-gray-900 line-clamp-4">
        {{ props.title }}
      </div>
      <div class="flex justify-end mt-auto">
        <span
          v-if="isAdminActive"
          class="inline-block px-3 py-1 mb-2 mr-2 text-sm font-semibold text-gray-700 bg-gray-200 rounded-full"
        >
          {{ props.cost?.toFixed(2) }}
        </span>
        <span
          class="inline-block px-3 py-1 mb-2 mr-2 text-sm font-semibold text-gray-700 bg-gray-200 rounded-full"
        >
          {{ props.price?.toFixed(2) }}
        </span>
      </div>
    </div>
  </div>
</template>

<style scoped>
.line-clamp-4 {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
