import Image from 'next/image'

interface LoadingSpinnerProps {
  size?: number
  message?: string
  className?: string
}

export default function LoadingSpinner({ 
  size = 200, 
  message = 'Loading...',
  className = '' 
}: LoadingSpinnerProps) {
  return (
    <div className={`flex flex-col items-center justify-center ${className}`}>
      <Image
        src="/Information/Images/Madibeng-logo-petals.gif"
        alt="Loading"
        width={size}
        height={size}
        className="object-contain"
        unoptimized
      />
      {message && (
        <p className="text-white text-lg font-medium mt-4">{message}</p>
      )}
    </div>
  )
}