import getSubscribeUrl, { PlanType, PlanProvider } from '@/lib/plans/getSubscribeUrl'

// Monthly subscription (Dodo)
const monthlyUrl = getSubscribeUrl({
  codename: "pro",
  type: PlanType.MONTHLY,
  provider: PlanProvider.DODO,
})

// Yearly subscription with discount
const yearlyUrl = getSubscribeUrl({
  codename: "pro",
  type: PlanType.YEARLY,
  provider: PlanProvider.DODO,
})

// With free trial
const trialUrl = getSubscribeUrl({
  codename: "pro",
  type: PlanType.MONTHLY,
  provider: PlanProvider.DODO,
  trialPeriodDays: 14, // 14-day free trial
})

'use client'
import { useState } from 'react'
import Link from 'next/link'
import { Button } from '@/components/ui/button'
import { Check } from 'lucide-react'
import getSubscribeUrl, { PlanType, PlanProvider } from '@/lib/plans/getSubscribeUrl'

function PricingPage({ plans }) {
  const [billingPeriod, setBillingPeriod] = useState<'monthly' | 'yearly'>('monthly')

  return (
    <div>
      <div className="flex items-center justify-center gap-4 mb-8">
        <button onClick={() => setBillingPeriod('monthly')}>Monthly</button>
        <button onClick={() => setBillingPeriod('yearly')}>
          Yearly <span className="badge">Save 20%</span>
        </button>
      </div>

      <div className="grid md:grid-cols-3 gap-6">
        {plans.map(plan => (
          <PricingCard key={plan.id} plan={plan} billingPeriod={billingPeriod} />
        ))}
      </div>
    </div>
  )
}

function PricingCard({ plan, billingPeriod }) {
  const isMonthly = billingPeriod === 'monthly'
  const price = isMonthly ? plan.monthlyPrice : plan.yearlyPrice
  const priceDisplay = (price || 0) / 100
  const period = isMonthly ? 'month' : 'year'

  return (
    <div className="p-6 border rounded-lg">
      <h3 className="text-2xl font-bold mb-2">{plan.name}</h3>
      <div className="mb-6">
        <span className="text-4xl font-bold">${priceDisplay}</span>
        <span className="text-muted-foreground">/{period}</span>
      </div>
      <Link href={getSubscribeUrl({
        codename: plan.codename,
        type: isMonthly ? PlanType.MONTHLY : PlanType.YEARLY,
        provider: PlanProvider.DODO,
        trialPeriodDays: 14,
      })}>
        <Button className="w-full" size="lg">Start 14-Day Free Trial</Button>
      </Link>
    </div>
  )
}