<template>
  <div class="px-6 font-sans">
    <h2 class="mb-1 text-center text-2xl font-bold">套餐选择</h2>
    <p class="mb-4 text-center text-sm font-[100] text-gray-600">*所有套餐均不限流量不限速度</p>

    <div class="space-y-4">
      <div
        v-for="(plan, index) in plans"
        :key="plan.id"
        @click="$emit('select', plan.id)"
        :class="[
          'relative h-[126px] cursor-pointer overflow-hidden rounded-[40px] border-4 border-black py-4 pl-[45px] transition-all',
          currentPlanIndex === index ? 'bg-black text-white' : 'bg-[#A8FF53] text-black',
        ]"
      >
        <div class="text-2xl font-bold">{{ plan.days }}天</div>
        <div class="text-[40px] leading-none font-semibold">${{ plan.price }}</div>
        <div :class="'text-sm'">约${{ plan.daily }}/天</div>
        <div
          v-if="plan.discount"
          :class="[
            index > 1 ? 'font-semibold' : '',
            currentPlanIndex === index ? 'bg-[#A8FF53]! text-black' : ' ',
          ]"
          class="absolute top-[20px] -right-[40px] h-[16px] w-[126px] origin-center rotate-45 bg-black text-center text-[14px] leading-[16px] font-[200] text-[#ADFF5B]"
        >
          {{ plan.discount }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
defineProps({
  plans: Array,
  currentPlanIndex: Number,
})
defineEmits(['select'])
</script>
