import { useTheme } from '../lib/theme-context';

export default function AnimatedFireLogo({ size = 80 }) {
  const { theme } = useTheme();

  // Theme-aware colors
  const colors = {
    dark: {
      flame1: '#FF6B35',
      flame2: '#F7931E', 
      flame3: '#FFF200',
      flame4: '#FDBA16',
      flame5: '#FF4500'
    },
    light: {
      flame1: '#F36E21',
      flame2: '#F6891F',
      flame3: '#FFD04A', 
      flame4: '#FDBA16',
      flame5: '#D84315'
    }
  };

  const currentColors = colors[theme] || colors.light;

  return (
    <div 
      className="fire-logo-container relative flex items-center justify-center"
      style={{ width: size, height: size * 1.5 }}
    >
      <svg 
        version="1.1" 
        xmlns="http://www.w3.org/2000/svg" 
        x="0px" 
        y="0px"
        width={size} 
        height={size * 1.5} 
        viewBox="0 0 125 189.864" 
        className="fire-svg"
      >
        {/* Main flame paths */}
        <path 
          className="flame-main" 
          fill={currentColors.flame1} 
          d="M76.553,186.09c0,0-10.178-2.976-15.325-8.226s-9.278-16.82-9.278-16.82s-0.241-6.647-4.136-18.465
          c0,0,3.357,4.969,5.103,9.938c0,0-5.305-21.086,1.712-30.418c7.017-9.333,0.571-35.654-2.25-37.534c0,0,13.07,5.64,19.875,47.54
          c6.806,41.899,16.831,45.301,6.088,53.985"
        />
        
        <path 
          className="flame-main one" 
          fill={currentColors.flame2} 
          d="M61.693,122.257c4.117-15.4,12.097-14.487-11.589-60.872c0,0,32.016,10.223,52.601,63.123
          c20.585,52.899-19.848,61.045-19.643,61.582c0.206,0.537-19.401-0.269-14.835-18.532S57.576,137.656,61.693,122.257z"
        />
        
        <path 
          className="flame-main two" 
          fill={currentColors.flame3} 
          d="M81.657,79.192c0,0,11.549,24.845,3.626,40.02c-7.924,15.175-21.126,41.899-0.425,64.998
          C84.858,184.21,125.705,150.905,81.657,79.192z"
        />
        
        <path 
          className="flame-main three" 
          fill={currentColors.flame4} 
          d="M99.92,101.754c0,0-23.208,47.027-12.043,80.072c0,0,32.741-16.073,20.108-45.79
          C95.354,106.319,99.92,114.108,99.92,101.754z"
        />
        
        <path 
          className="flame-main four" 
          fill={currentColors.flame1} 
          d="M103.143,105.917c0,0,8.927,30.753-1.043,46.868c-9.969,16.115-14.799,29.041-14.799,29.041
          S134.387,164.603,103.143,105.917z"
        />
        
        <path 
          className="flame-main five" 
          fill={currentColors.flame4} 
          d="M62.049,104.171c0,0-15.645,67.588,10.529,77.655C98.753,191.894,69.033,130.761,62.049,104.171z"
        />
        
        {/* Small accent flames */}
        <path 
          className="flame" 
          fill={currentColors.flame5} 
          d="M101.011,112.926c0,0,8.973,10.519,4.556,16.543C99.37,129.735,106.752,117.406,101.011,112.926z"
        />
        
        <path 
          className="flame one" 
          fill={currentColors.flame5} 
          d="M55.592,126.854c0,0-3.819,13.29,2.699,16.945C64.038,141.48,55.907,132.263,55.592,126.854z"
        />
        
        <path 
          className="flame two" 
          fill={currentColors.flame5} 
          d="M54.918,104.595c0,0-3.959,6.109-1.24,8.949C56.93,113.256,52.228,107.329,54.918,104.595z"
        />
      </svg>

      <style jsx>{`
        .fire-logo-container {
          filter: drop-shadow(0 0 10px rgba(255, 107, 53, 0.3));
        }
        
        .fire-svg {
          animation: fire-glow 3s ease-in-out infinite alternate;
        }
        
        .flame-main {
          animation: flame-flicker-main 1.5s ease-in-out infinite alternate;
          transform-origin: center bottom;
        }
        
        .flame-main.one {
          animation: flame-flicker-one 1.8s ease-in-out infinite alternate;
          animation-delay: -0.3s;
        }
        
        .flame-main.two {
          animation: flame-flicker-two 1.2s ease-in-out infinite alternate;
          animation-delay: -0.6s;
        }
        
        .flame-main.three {
          animation: flame-flicker-three 2.1s ease-in-out infinite alternate;
          animation-delay: -0.9s;
        }
        
        .flame-main.four {
          animation: flame-flicker-four 1.7s ease-in-out infinite alternate;
          animation-delay: -0.2s;
        }
        
        .flame-main.five {
          animation: flame-flicker-five 1.9s ease-in-out infinite alternate;
          animation-delay: -0.7s;
        }
        
        .flame {
          animation: flame-small 1.0s ease-in-out infinite alternate;
          transform-origin: center bottom;
        }
        
        .flame.one {
          animation: flame-small-one 1.3s ease-in-out infinite alternate;
          animation-delay: -0.4s;
        }
        
        .flame.two {
          animation: flame-small-two 0.9s ease-in-out infinite alternate;
          animation-delay: -0.1s;
        }
        
        @keyframes fire-glow {
          0% {
            filter: drop-shadow(0 0 10px rgba(255, 107, 53, 0.3)) brightness(1);
          }
          100% {
            filter: drop-shadow(0 0 15px rgba(255, 107, 53, 0.5)) brightness(1.1);
          }
        }
        
        @keyframes flame-flicker-main {
          0% {
            transform: scaleY(1) scaleX(1) rotate(0deg);
            opacity: 1;
          }
          100% {
            transform: scaleY(1.05) scaleX(0.98) rotate(-1deg);
            opacity: 0.95;
          }
        }
        
        @keyframes flame-flicker-one {
          0% {
            transform: scaleY(1) scaleX(1) rotate(0deg);
            opacity: 0.9;
          }
          100% {
            transform: scaleY(1.08) scaleX(0.95) rotate(1deg);
            opacity: 1;
          }
        }
        
        @keyframes flame-flicker-two {
          0% {
            transform: scaleY(1) scaleX(1) rotate(0deg);
            opacity: 1;
          }
          100% {
            transform: scaleY(1.03) scaleX(1.02) rotate(-0.5deg);
            opacity: 0.92;
          }
        }
        
        @keyframes flame-flicker-three {
          0% {
            transform: scaleY(1) scaleX(1) rotate(0deg);
            opacity: 0.95;
          }
          100% {
            transform: scaleY(1.06) scaleX(0.97) rotate(1.5deg);
            opacity: 1;
          }
        }
        
        @keyframes flame-flicker-four {
          0% {
            transform: scaleY(1) scaleX(1) rotate(0deg);
            opacity: 1;
          }
          100% {
            transform: scaleY(1.04) scaleX(1.01) rotate(-1.2deg);
            opacity: 0.88;
          }
        }
        
        @keyframes flame-flicker-five {
          0% {
            transform: scaleY(1) scaleX(1) rotate(0deg);
            opacity: 0.93;
          }
          100% {
            transform: scaleY(1.07) scaleX(0.96) rotate(0.8deg);
            opacity: 1;
          }
        }
        
        @keyframes flame-small {
          0% {
            transform: scaleY(1) scaleX(1);
            opacity: 0.8;
          }
          100% {
            transform: scaleY(1.15) scaleX(0.9);
            opacity: 1;
          }
        }
        
        @keyframes flame-small-one {
          0% {
            transform: scaleY(1) scaleX(1);
            opacity: 0.9;
          }
          100% {
            transform: scaleY(1.12) scaleX(0.95);
            opacity: 0.7;
          }
        }
        
        @keyframes flame-small-two {
          0% {
            transform: scaleY(1) scaleX(1);
            opacity: 1;
          }
          100% {
            transform: scaleY(1.18) scaleX(0.88);
            opacity: 0.85;
          }
        }
      `}</style>
    </div>
  );
}