xiaoxia-saas/apps/web/src/pages/subscription/components/SubscriptionUI.tsx

import React from "react"
import type { BillingCycle } from "@/api/subscription"

interface BillingCycleSwitchProps {
  value: BillingCycle
  onChange: (cycle: BillingCycle) => void
  monthlyPrice: number
  yearlyPrice: number
}

/** 自定义计费周期切换组件 */
export const BillingCycleSwitch: React.FC<BillingCycleSwitchProps> = ({
  value,
  onChange,
  monthlyPrice,
  yearlyPrice,
}) => (
  <div className="xx-billing-cycle-switch">
    <button
      type="button"
      className={`xx-billing-cycle-btn ${value === "monthly" ? "active" : ""}`}
      onClick={() => onChange("monthly")}
    >
      ¥{monthlyPrice}/月
    </button>
    <button
      type="button"
      className={`xx-billing-cycle-btn ${value === "yearly" ? "active" : ""}`}
      onClick={() => onChange("yearly")}
    >
      ¥{yearlyPrice}/年
      {yearlyPrice > 0 && monthlyPrice > 0 && (
        <span className="xx-save">省 ¥{monthlyPrice * 12 - yearlyPrice}</span>
      )}
    </button>
  </div>
)

interface SpinnerProps {
  size?: "small" | "large"
}

/** 自定义 Spinner 组件 */
export const Spinner: React.FC<SpinnerProps> = ({ size = "large" }) => (
  <div className={`xx-spinner xx-spinner--${size}`}>
    <div className="xx-spinner-dot" />
    <div className="xx-spinner-dot" />
    <div className="xx-spinner-dot" />
  </div>
)