<script lang="ts" setup>
interface PricingFeature {
  text: string
  included: boolean
}

interface Props {
  name: string
  price: string
  period?: string
  description?: string
  features: PricingFeature[]
  highlighted?: boolean
  badge?: string
  ctaLabel?: string
  ctaHref?: string
}

withDefaults(defineProps<Props>(), {
  period: '/mo',
  description: undefined,
  highlighted: false,
  badge: undefined,
  ctaLabel: 'Get Started',
  ctaHref: undefined,
})
</script>

<template>
  <div
    class="glass-card pricing-card"
    :class="{ 'pricing-card--highlighted': highlighted }"
    style="padding: 32px; height: 100%; display: flex; flex-direction: column;"
  >
    <!-- Badge -->
    <VChip
      v-if="badge"
      color="primary"
      size="small"
      class="mb-4 align-self-start"
    >
      {{ badge }}
    </VChip>

    <!-- Plan name -->
    <h3 class="text-h6 font-weight-bold mb-2">{{ name }}</h3>
    <p v-if="description" class="text-body-2 text-medium-emphasis mb-4">
      {{ description }}
    </p>

    <!-- Price -->
    <div class="mb-6">
      <span class="text-h3 font-weight-bold">{{ price }}</span>
      <span class="text-body-2 text-medium-emphasis">{{ period }}</span>
    </div>

    <!-- Features -->
    <div class="flex-grow-1 mb-6">
      <div
        v-for="(feature, i) in features"
        :key="i"
        class="d-flex align-center mb-3"
      >
        <VIcon
          :icon="feature.included ? 'tabler-check' : 'tabler-x'"
          :color="feature.included ? 'success' : undefined"
          :style="{ opacity: feature.included ? 1 : 0.3 }"
          size="18"
          class="me-3"
        />
        <span
          class="text-body-2"
          :class="feature.included ? '' : 'text-disabled'"
        >
          {{ feature.text }}
        </span>
      </div>
    </div>

    <!-- CTA -->
    <a v-if="ctaHref" :href="ctaHref" class="text-decoration-none">
      <VBtn
        block
        :variant="highlighted ? 'flat' : 'outlined'"
        :color="highlighted ? 'primary' : undefined"
        size="large"
      >
        {{ ctaLabel }}
      </VBtn>
    </a>
    <VBtn
      v-else
      block
      :variant="highlighted ? 'flat' : 'outlined'"
      :color="highlighted ? 'primary' : undefined"
      size="large"
    >
      {{ ctaLabel }}
    </VBtn>
  </div>
</template>

<style lang="scss" scoped>
.pricing-card--highlighted {
  border-color: rgba(59, 130, 246, 0.4) !important;
  box-shadow: 0 0 40px rgba(59, 130, 246, 0.15);
}
</style>
