import React from 'react';

interface AnimatedGradientProps {
  className?: string;
}

const AnimatedGradient: React.FC<AnimatedGradientProps> = ({ className = '' }) => {
  return (
    <div className={`animated-gradient-container ${className}`}>
      <div className="animated-gradient"></div>
      <style jsx>{`
        .animated-gradient-container {
          position: relative;
          width: 100%;
          height: 100%;
          overflow: hidden;
        }

        .animated-gradient {
          background: linear-gradient(-45deg, #ff8c00, #ff4500, #ffd700, #ff6347);
          background-size: 400% 400%;
          animation: gradient 15s ease infinite;
          width: 120%;
          height: 120%;
          position: absolute;
          top: -10%;
          left: -10%;
        }

        .animated-gradient-container::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: linear-gradient(
            to right,
            var(--color-background-primary) 0%,
            rgba(14, 8, 8, 0.6) 3%,
            transparent 8%,
            transparent 92%,
            rgba(14, 8, 8, 0.6) 97%,
            var(--color-background-primary) 100%
          ),
          linear-gradient(
            to bottom,
            var(--color-background-primary) 0%,
            rgba(14, 8, 8, 0.8) 8%,
            rgba(14, 8, 8, 0.6) 15%,
            rgba(14, 8, 8, 0.4) 25%,
            rgba(14, 8, 8, 0.2) 35%,
            transparent 45%,
            transparent 55%,
            rgba(14, 8, 8, 0.2) 65%,
            rgba(14, 8, 8, 0.4) 75%,
            rgba(14, 8, 8, 0.6) 85%,
            rgba(14, 8, 8, 0.8) 92%,
            var(--color-background-primary) 100%
          );
          pointer-events: none;
          z-index: 1;
        }

        @keyframes gradient {
          0% {
            background-position: 0% 50%;
          }
          50% {
            background-position: 100% 50%;
          }
          100% {
            background-position: 0% 50%;
          }
        }
      `}</style>
    </div>
  );
};

export default AnimatedGradient;