import React from 'react' import { Link } from '@inertiajs/react' import AccessBadge from './AccessBadge' function ActionButton({ disabled, children, onClick, href, tone = 'primary' }) { const toneClass = { primary: 'border-sky-300/25 bg-sky-300/12 text-sky-100 hover:border-sky-300/40 hover:bg-sky-300/18', emerald: 'border-emerald-300/25 bg-emerald-300/10 text-emerald-100 hover:bg-emerald-300/18', default: 'border-white/10 bg-white/[0.05] text-white hover:border-white/20 hover:bg-white/[0.08]', }[tone] ?? 'border-white/10 bg-white/[0.05] text-white hover:border-white/20 hover:bg-white/[0.08]' if (href) { return {children} } return ( ) } export default function PlanCard({ product, selectedPlan, currentTier, isSubscribed, activePlanKey, billingEnabled, loginHref, manageHref, onCheckout }) { const activeTier = typeof currentTier === 'string' ? currentTier.toLowerCase() : 'free' const isActivePlan = selectedPlan?.key === activePlanKey // Pro subscribers already have creator access — don't show a separate "switch" CTA for creator card const isHigherTierCovered = activeTier === 'pro' && product.tier === 'creator' const isPlanReady = Boolean(selectedPlan?.configured && selectedPlan?.price_id_valid && selectedPlan?.remote_price_exists !== false) // User has a different active subscription (not this plan) const isSubscribedElsewhere = isSubscribed && !isActivePlan return (

{product.badge}

{product.name}

{product.description}

{isActivePlan ? Your plan : }

Monthly

{selectedPlan?.price_display || '—'}

Billed monthly · cancel anytime

{product.features.map((feature) => (
{feature}
))}
{/* Active plan: manage */} {isActivePlan ? ( Manage subscription ) : null} {/* Subscribed elsewhere: switch */} {isSubscribedElsewhere && !isHigherTierCovered ? ( Switch to {product.name} ) : null} {/* Higher tier already covers this plan */} {isHigherTierCovered && !isActivePlan ? (

Included in your Pro plan

) : null} {/* Not subscribed, not logged in */} {!isSubscribed && loginHref ? ( {billingEnabled ? `Get ${product.name}` : 'Coming soon'} ) : null} {/* Not subscribed, logged in */} {!isSubscribed && !loginHref ? ( onCheckout(selectedPlan)} tone="primary" > {!billingEnabled ? 'Coming soon' : isPlanReady ? `Get ${product.name} — ${selectedPlan?.price_display || ''}` : 'Not available yet'} ) : null}
) }