import { useState } from "react"
import { Button, Badge } from "@/components/ui"
import { startCheckout } from "@/lib/billing"

type Plan = {
  id: string
  name: string
  price: number
  interval: "month" | "year"
  features: string[]
}

const PLANS: Plan[] = [
  {
    id: "monthly",
    name: "Monthly",
    price: 9.99,
    interval: "month",
    features: ["All features", "Cancel anytime"],
  },
  {
    id: "annual",
    name: "Annual",
    price: 79.99,
    interval: "year",
    features: ["All features", "Cancel anytime", "Save 33%"],
  },
]

export function Paywall({ userId }: { userId: string }) {
  const [selectedPlan, setSelectedPlan] = useState<string>("annual")
  const [loading, setLoading] = useState(false)

  async function handleSubscribe() {···}

  return (
    <div className="flex flex-col items-center p-8 max-w-md mx-auto">
      <h1 className="text-3xl font-bold mb-2">Upgrade to Pro</h1>
      <p className="text-gray-500 mb-8">Unlock all features</p>
      <div className="w-full space-y-3 mb-6">···</div>
      <Button onClick={handleSubscribe} disabled={loading} className="w-full">
        {loading ? "Loading..." : "Subscribe"}
      </Button>
      <p className="text-xs text-gray-400 mt-4">
        Cancel anytime. Terms apply.
      </p>
    </div>
  )
}