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

'use client';

import { Package } from 'lucide-react';

interface PricingSectionEmptyProps {
  packageType: 'standard' | 'special_niche';
}

export default function PricingSectionEmpty({ packageType }: PricingSectionEmptyProps) {
  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 py-12">
          <div className="bg-gray-50 border border-gray-200 rounded-lg p-8 max-w-md mx-auto">
            <div className="flex flex-col items-center gap-4">
              <div className="bg-gray-100 p-3 rounded-full">
                <Package className="h-8 w-8 text-gray-500" />
              </div>
              <div>
                <p className="font-medium text-gray-700">No packages found</p>
                <p className="text-sm text-gray-500 mt-1">
                  No {packageType === 'standard' ? 'standard' : 'special niche'} packages are currently available.
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}