'use client'

import React from 'react'

interface LoadingSpinnerProps {
  progress?: number  
  size?: number  
  strokeWidth?: number
  className?: string
}

const LoadingSpinner: React.FC<LoadingSpinnerProps> = ({
  progress = 0,
  size = 140,
  strokeWidth = 6,
  className = ''
}) => {
  const radius = (size - strokeWidth) / 2
  const circumference = radius * 2 * Math.PI
  const strokeDasharray = circumference
  const strokeDashoffset = circumference - (progress / 100) * circumference

  return (
    <div className={`flex flex-col items-center justify-center ${className}`}>
      <div className="relative" style={{ width: size, height: size }}>
        {/* Фоновый круг с градиентом */}
        <svg
          className="transform -rotate-90 drop-shadow-lg"
          width={size}
          height={size}
          viewBox={`0 0 ${size} ${size}`}
        >
          <defs>
            <linearGradient id="progressGradient" x1="0%" y1="0%" x2="100%" y2="100%">
              <stop offset="0%" stopColor="#2563eb" />
              <stop offset="100%" stopColor="#0891b2" />
            </linearGradient>
          </defs>
          
          {/* Фоновый круг */}
          <circle
            cx={size / 2}
            cy={size / 2}
            r={radius}
            stroke="rgba(255, 255, 255, 0.08)"
            strokeWidth={strokeWidth}
            fill="transparent"
          /> 
          
          {/* Прогресс круг с градиентом */}
          <circle
            cx={size / 2}
            cy={size / 2}
            r={radius}
            stroke="url(#progressGradient)"
            strokeWidth={strokeWidth}
            fill="transparent"
            strokeDasharray={strokeDasharray}
            strokeDashoffset={strokeDashoffset}
            strokeLinecap="round"
            className="transition-all duration-500 ease-out filter drop-shadow-md"
          />
        </svg>
         
        {/* Процент в центре */}
        <div className="absolute inset-0 flex items-center justify-center">
          <div className="text-center">
            <span className="text-white text-3xl font-bold bg-gradient-to-r from-blue-400 to-cyan-300 bg-clip-text text-transparent">
              {Math.round(progress)}%
            </span>
          </div>
        </div>
      </div>
       
      {/* Текст загрузки */}
      <div className="mt-6 text-center">
        <p className="text-white text-lg font-semibold">Загрузка модели…</p>
        <p className="text-gray-400 text-sm mt-2">Пожалуйста, подождите</p>
      </div>
    </div>
  )
}

export default LoadingSpinner