// src/app/components/admin/blocks/ProcessSkeletons/ProcessSectionToggleLoading.tsx

'use client';

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

interface ProcessSectionToggleLoadingProps {
  steps: ProcessStep[];
}

export default function ProcessSectionToggleLoading({ steps }: ProcessSectionToggleLoadingProps) {
  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-gray-600 font-medium">
            Loading process steps...
          </span>
        </div>
      </div>
      
      {/* Blurred content overlay */}
      <div className="opacity-50 blur-sm">
        <div className="space-y-8 lg:space-y-12">
          {steps.map((step) => (
            <div key={step.number} className="flex flex-col lg:flex-row items-center gap-8">
              <div className="flex-1 bg-gray-50 rounded-3xl p-8 border border-gray-200">
                <div className="flex items-start gap-6">
                  <div className="shrink-0 w-16 h-16 rounded-2xl bg-linear-to-r from-gray-400 to-gray-500"></div>
                  <div className="flex-1">
                    <h3 className="text-2xl font-bold text-gray-900 mb-3">{step.title}</h3>
                    <p className="text-gray-600 mb-6">{step.description}</p>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}