// src/app/components/admin/blocks/PricingSkeletons/PricingSectionToggleLoading.tsx

'use client';

import { Loader2 } from 'lucide-react';
import { PricingPackage } from '@/lib/page-builder/types';

export interface CardStyles {
  background: string;
  border: string;
  text: string;
  iconBg: string;
  featureText: string;
  priceText: string;
}

type IconComponent = React.ComponentType<{ className?: string }>;

interface PricingSectionToggleLoadingProps {
  packageType: 'standard' | 'special_niche';
  packages: PricingPackage[];
  getCardStyles: (pkg: PricingPackage) => CardStyles;
  getIcon: (pkg: PricingPackage) => IconComponent;
}

export default function PricingSectionToggleLoading({ 
  packageType, 
  packages, 
  getCardStyles, 
  getIcon 
}: PricingSectionToggleLoadingProps) {
  return (
    <div className="relative">
      {/* Loading Overlay */}
      <div className="absolute inset-0 bg-white/50 backdrop-blur-sm z-10 flex items-center justify-center rounded-3xl">
        <div className="bg-white rounded-2xl shadow-xl p-6 flex items-center gap-3">
          <Loader2 className="h-6 w-6 text-blue-600 animate-spin" />
          <span className="text-text-secondary font-medium">
            Loading {packageType === 'standard' ? 'Standard' : 'Special Niche'} Packages...
          </span>
        </div>
      </div>
      
      {/* Blurred content overlay */}
      <div className="opacity-50 blur-sm">
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 max-w-7xl mx-auto">
          {packages.map((pkg) => {
            const styles = getCardStyles(pkg);
            const IconComponent = getIcon(pkg);
            
            return (
              <div
                key={pkg.id}
                className={`relative rounded-3xl p-8 transition-all duration-300 shadow-xl ${styles.background} ${styles.border} ${
                  pkg.is_popular ? 'lg:scale-105 z-10' : ''
                }`}
              >
                <div className="text-center mb-8">
                  <div className={`inline-flex items-center justify-center w-16 h-16 rounded-2xl mb-4 ${styles.iconBg}`}>
                    <IconComponent className={`h-7 w-7 ${
                      pkg.is_popular || pkg.package_type === 'special_niche' 
                        ? 'text-white' 
                        : 'text-blue-600'
                    }`} />
                  </div>
                  <h3 className={`text-2xl font-bold mb-3 ${styles.text}`}>
                    {pkg.name}
                  </h3>
                  <p className={`text-sm ${pkg.is_popular || pkg.package_type === 'special_niche' ? 'text-white/90' : 'text-text-secondary'}`}>
                    {pkg.description}
                  </p>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}