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

'use client';

import { AlertCircle, RefreshCw } from 'lucide-react';

interface PortfolioSectionErrorProps {
  error: string;
  onRetry?: () => void;
}

export default function PortfolioSectionError({ error, onRetry }: PortfolioSectionErrorProps) {
  return (
    <section className="py-24 bg-linear-to-br from-slate-50 via-white to-blue-50/30 relative overflow-hidden">
      <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center">
          <div className="bg-red-50 border border-red-200 rounded-lg p-8 max-w-md mx-auto">
            <div className="flex flex-col items-center gap-4">
              <div className="bg-red-100 p-3 rounded-full">
                <AlertCircle className="h-8 w-8 text-red-600" />
              </div>
              <div>
                <p className="font-medium text-red-800">Error loading websites</p>
                <p className="text-sm text-red-600 mt-1">{error}</p>
              </div>
              {onRetry && (
                <button
                  onClick={onRetry}
                  className="mt-2 px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors flex items-center gap-2"
                >
                  <RefreshCw className="h-4 w-4" />
                  Try Again
                </button>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}