<script setup lang="ts">
const paymentsStore = usePaymentsStore()
</script>

<template>
  <div>
    <AppPageHeader title="Pricing" />

    <PricingPlans
      compact
      :products="paymentsStore.oneTimeProducts"
    />
  </div>
</template>

<script setup lang="ts">
const paymentsStore = usePaymentsStore()

// Filter recurring products to match the desired billing interval (monthly/yearly).
const monthlyRecurringProducts = computed(() => {
    return paymentsStore.recurringProducts
      .filter(product => product.recurringInterval === 'month')
})
</script>

<template>
  <div>
    <AppPageHeader title="Pricing" />

    <PricingPlans
      compact
      :products="monthlyRecurringProducts"
    />
  </div>
</template>

<script setup lang="ts">
import type { TabsItem } from '@nuxt/ui'

const paymentsStore = usePaymentsStore()
const billingInterval = ref<'month' | 'year'>('month')

// Keep toggle data minimal for testing page.
const billingTabs: TabsItem[] = [
  { label: 'Monthly', value: 'month' },
  { label: 'Yearly', value: 'year' },
]

// Filter recurring products to match the selected billing interval.
const monthlyRecurringProducts = computed(() => {
    return paymentsStore.recurringProducts
      .filter(product => product.recurringInterval === 'month')
})
const yearlyRecurringProducts = computed(() => {
    return paymentsStore.recurringProducts
      .filter(product => product.recurringInterval === 'year')
})
const visibleRecurringProducts = computed(() => {
    return billingInterval.value === 'year'
      ? yearlyRecurringProducts.value
      : monthlyRecurringProducts.value
})
</script>

<template>
  <div>
    <AppPageHeader title="Pricing" />

    <UTabs
      v-model="billingInterval"
      :items="billingTabs"
      :content="false"
      class="mb-4 w-full max-w-xs"
    />
    <div class="md:w-2/3">
      <PricingPlans
        compact
        :products="visibleRecurringProducts"
      />
    </div>
  </div>
</template>