"use client";

import { useAccountVpnCatalog } from "@/features/services/hooks";
import { VpnPlansContent } from "@/features/services/components/vpn/VpnPlansContent";

/**
 * Account VPN Plans View
 *
 * Thin wrapper that provides data to VpnPlansContent with variant="account".
 * Uses authenticated catalog hook for account-specific pricing.
 */
export function VpnPlansView() {
  const { data, error } = useAccountVpnCatalog();
  const vpnPlans = data?.plans || [];
  const activationFees = data?.activationFees || [];
  const isLoading = !data && !error;

  return (
    <div className="max-w-6xl mx-auto px-4">
      <VpnPlansContent
        variant="account"
        plans={vpnPlans}
        activationFees={activationFees}
        isLoading={isLoading}
        error={error}
      />
    </div>
  );
}

export default VpnPlansView;
