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

'use client';

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

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

export default function PricingSectionError({ error, onRetry }: PricingSectionErrorProps) {
  return (
    <section className="py-24 relative overflow-hidden">
      {/* Beautiful Background */}
      <div className="absolute inset-0 bg-linear-to-br from-blue-50 via-white to-purple-50">
        <div className="absolute top-0 left-0 w-72 h-72 bg-blue-200/20 rounded-full blur-3xl animate-float"></div>
        <div className="absolute bottom-0 right-0 w-96 h-96 bg-purple-200/20 rounded-full blur-3xl animate-float" style={{ animationDelay: '2s' }}></div>
        <div className="absolute top-1/2 left-1/3 w-64 h-64 bg-blue-100/30 rounded-full blur-3xl animate-float" style={{ animationDelay: '4s' }}></div>
        <div className="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.8)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.8)_1px,transparent_1px)] bg-size-[64px_64px] mask-[radical-gradient(ellipse_80%_50%_at_50%_50%,black,transparent)]"></div>
      </div>

      <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 packages</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>
  );
}