<template>
  <view class="product-card" @tap="$emit('tap', product)">
    <view class="card-left">
      <text class="card-emoji">{{ product.emoji }}</text>
      <text v-if="product.alc > 0" class="alc-tag">{{ product.alc }}%</text>
    </view>
    <view class="card-body">
      <text class="card-name">{{ product.name }}</text>
      <text class="card-en">{{ product.en }}</text>
      <text class="card-desc">{{ product.desc }}</text>
    </view>
    <view class="card-add" @tap.stop="$emit('add', product)">+</view>
  </view>
</template>

<script>
export default {
  name: 'ProductCard',
  props: { product: { type: Object, required: true } },
  emits: ['tap', 'add']
}
</script>

<style scoped>
.product-card{width:100%;background:var(--bg-card);border-radius:var(--radius);margin-bottom:20rpx;border:1px solid var(--border);display:flex;align-items:center;padding:20rpx;gap:20rpx;min-height:140rpx}
.card-left{position:relative;flex-shrink:0;width:120rpx;height:120rpx;display:flex;align-items:center;justify-content:center;background:rgba(245,166,35,.06);border-radius:20rpx}
.card-emoji{font-size:64rpx}
.alc-tag{position:absolute;top:4rpx;right:4rpx;background:rgba(0,0,0,.6);color:var(--gold-light);font-size:18rpx;padding:2rpx 10rpx;border-radius:12rpx;font-weight:700}
.card-body{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
.card-name{font-size:30rpx;font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-en{font-size:22rpx;color:var(--text-muted);margin:4rpx 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-desc{font-size:24rpx;color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-add{flex-shrink:0;width:56rpx;height:56rpx;border-radius:50%;background:var(--orange);color:#fff;font-size:32rpx;display:flex;align-items:center;justify-content:center;box-shadow:0 4rpx 20rpx rgba(255,107,53,.4)}
</style>
