components/LoadingSpinner.jsx

export default function LoadingSpinner() {
  return (
    <div className="flex flex-col items-center justify-center h-96">
      <div className="relative">
        <div className="w-16 h-16 border-4 border-gray-700 border-t-accent rounded-full animate-spin"></div>
        <div className="absolute inset-0 w-16 h-16 border-4 border-transparent border-t-primary rounded-full animate-spin" style={{ animationDuration: '1.5s' }}></div>
      </div>
      <p className="mt-6 text-gray-400 animate-pulse">Analyzing team statistics...</p>
      <p className="mt-2 text-sm text-gray-500">Crunching numbers and calculating probabilities</p>
    </div>
  )
}