Pricing Plans

// Plan structure from source/modules/prices/types/plan.ts
export interface Plan {
  id: string;
  name: string;
  description: string;
  priceMonth: number;      // Monthly price in USD
  priceYear: number;       // Annual monthly price in USD
  features: string[];      // Feature list
  buttonText: string;      // CTA text
  highlight: boolean;      // Featured plan indicator
}

// From billing-toggle.tsx - Toggle between monthly/annual
"use client";

interface BillingToggleProps {
  isAnnual: boolean;
  onToggle: () => void;
}

export function BillingToggle({ isAnnual, onToggle }: BillingToggleProps) {
  return (
    <div className="flex items-center gap-4 mb-12">
      <span className={`text-sm ${!isAnnual ? "font-bold" : "text-gray-500"}`}>
        Mensual
      </span>
      <button onClick={onToggle} className="relative w-12 h-6 bg-[#121f3d] rounded-full">
        <div className={`w-4 h-4 bg-white rounded-full transition-all 
                       ${isAnnual ? "translate-x-6" : "translate-x-0"}`} />
      </button>
      <span className={`text-sm ${isAnnual ? "font-bold" : "text-gray-500"}`}>
        Anual <span className="text-green-500 ml-1 text-xs font-bold">-20%</span>
      </span>
    </div>
  );
}

// Pricing card displays calculated price based on billing cycle
interface PricingCardProps {
  plan: Plan;
  displayPrice: number;  // Calculated based on billing cycle
}

// From pricing-card.tsx
<div className="flex items-baseline mb-8">
  <span className="text-sm font-medium">USD</span>
  <span className="text-5xl font-black mx-1">{displayPrice}</span>
  <span className="text-sm text-gray-500">/ mes</span>
</div>