<template>
    <div class="product-card" @click="$emit('click')">
        <div class="product-image-wrapper">
            <FileImage :src="image" :alt="name" class="product-image" fallback="https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/146710fe9ece.bin" />
            <div v-if="price" class="product-price-badge">
                ₱{{ price }}
            </div>
        </div>
        <div class="product-info">
            <h5 class="product-name">{{ name }}</h5>
            <p v-if="unit" class="product-unit">per {{ unit }}</p>
            <p v-if="description" class="product-description text-truncate-2">
                {{ description }}
            </p>
        </div>
    </div>
</template>

<script setup>
import { computed } from 'vue'
import FileImage from '../Core/FileImage.vue'

const props = defineProps({
    name: { type: String, required: true },
    price: { type: [String, Number], default: '' },
    unit: { type: String, default: '' },
    description: { type: String, default: '' },
    image: { type: String, default: '' }
})

defineEmits(['click'])
</script>

<style scoped>
.product-card {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.product-image-wrapper {
    position: relative;
    width: 100%;
    padding-top: 100%;
    /* 1:1 Aspect Ratio */
    background: #f8f9fa;
}

.product-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-price-badge {
    position: absolute;
    bottom: 0;
    right: 0;
    background: rgba(66, 185, 131, 0.9);
    color: white;
    padding: 6px 12px;
    border-top-left-radius: 12px;
    font-weight: 700;
    backdrop-filter: blur(4px);
    font-size: 0.9rem;
}

.product-info {
    padding: 12px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.product-name {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 4px;
    color: #2c3e50;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-unit {
    font-size: 0.75rem;
    color: #7f8c8d;
    margin-bottom: 8px;
    font-style: italic;
}

.product-description {
    font-size: 0.85rem;
    color: #636e72;
    margin-bottom: 0;
    line-height: 1.4;
}

.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Dark mode support (if applicable) */
:global(.dark-mode) .product-card {
    background: #24272c;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

:global(.dark-mode) .product-name {
    color: #e0e0e0;
}

:global(.dark-mode) .product-description {
    color: #b0b0b0;
}

:global(.dark-mode) .product-image-wrapper {
    background: #1a1c20;
}
</style>
