// src/app/components/admin/blocks/PortfolioSkeletons/PortfolioSectionToggleLoading.tsx

'use client';

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

interface PortfolioSectionToggleLoadingProps {
  websites: Website[];
  columns?: 2 | 3 | 4;
}

export default function PortfolioSectionToggleLoading({ 
  websites, 
  columns = 4 
}: PortfolioSectionToggleLoadingProps) {
  
  const getGridClass = () => {
    switch (columns) {
      case 2:
        return 'grid grid-cols-1 md:grid-cols-2 gap-8';
      case 3:
        return 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8';
      case 4:
        return 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8';
      default:
        return 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8';
    }
  };

  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 websites...
          </span>
        </div>
      </div>
      
      {/* Blurred content overlay */}
      <div className="opacity-50 blur-sm">
        <div className={getGridClass()}>
          {websites.map((site) => (
            <div
              key={site.id}
              className="group bg-white rounded-3xl shadow-xl overflow-hidden border border-gray-100 relative"
            >
              {/* Header */}
              <div className="relative h-32 bg-linear-to-br from-slate-900 via-blue-900 to-purple-900 overflow-hidden">
                <div className="absolute inset-0 flex items-center justify-center p-6">
                  <div className="text-white text-center">
                    <div className="text-lg font-bold">{site.name}</div>
                    <div className="text-blue-200 text-xs mt-1">{site.domain}</div>
                  </div>
                </div>
              </div>

              {/* Content */}
              <div className="p-6">
                <div className="text-center mb-6">
                  <div className="text-sm text-gray-500">{site.description?.substring(0, 60)}...</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}