/* eslint-disable @next/next/no-img-element -- Static brand logo URL; next/image migration is out of scope. */
import { useTheme } from '../lib/theme-context';

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

  return (
    <div 
      className="deck-hearth-logo-container relative flex items-center justify-center"
      style={{ width: size * 1.2, height: size * 1.2 }}
    >
      <img 
        src="https://dvkqopzojif9t9bo.public.blob.vercel-storage.com/public/logo.svg"
        alt="Deck Hearth Logo"
        width={size}
        height={size}
        className="logo-image"
        style={{
          maxWidth: '100%',
          height: 'auto',
          filter: 'drop-shadow(0 2px 8px rgba(0, 0, 0, 0.15))'
        }}
      />

      <style jsx>{`
        .deck-hearth-logo-container {
          transition: transform 0.2s ease;
        }
        
        .deck-hearth-logo-container:hover {
          transform: scale(1.02);
        }
        
        .logo-image {
          transition: filter 0.2s ease;
        }
        
        .logo-image:hover {
          filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
        }
      `}</style>
    </div>
  );
}