<template>
  <article class="pricing-row-card" :class="recommended ? 'is-recommended' : ''" data-aos="fade-up">
    <div>
      <div class="pricing-row-card__title">
        <h3>{{ name }}</h3>
        <span v-if="recommended">推荐</span>
      </div>
      <p>{{ description }}</p>
    </div>
    <div class="pricing-row-card__price">
      <strong>{{ price }}</strong>
      <small>/{{ unit }}</small>
    </div>
    <ul>
      <li v-for="item in features" :key="item.name">
        <span>{{ item.name }}</span>{{ item.value }}
      </li>
    </ul>
    <button class="secondary-button justify-center whitespace-nowrap" type="button" @click="$emit('select')">选择{{ name }}</button>
  </article>
</template>

<script setup>
defineProps({
  name: { type: String, required: true },
  description: { type: String, required: true },
  price: { type: String, required: true },
  unit: { type: String, required: true },
  features: { type: Array, default: () => [] },
  recommended: { type: Boolean, default: false }
})
defineEmits(['select'])
</script>
