import React, { useState } from 'react';

export const Logo: React.FC<{ size?: 'sm' | 'md' | 'lg', showText?: boolean }> = ({ size = 'md', showText = true }) => {
  const [imageError, setImageError] = useState(false);
  
  const sizeClasses = {
    sm: 'h-8 w-8',
    md: 'h-12 w-12',
    lg: 'h-32 w-32',
  };

  const textSizes = {
    sm: 'text-lg',
    md: 'text-2xl',
    lg: 'text-5xl',
  };

  return (
    <div className="flex items-center gap-3 select-none group">
      <div className={`relative rounded-full bg-linear-to-br from-zsl-card to-black p-0.5 border border-zsl-primary/30 group-hover:border-zsl-primary group-hover:shadow-[0_0_15px_rgba(0,212,255,0.4)] transition-all duration-300 ${sizeClasses[size]} overflow-hidden flex items-center justify-center`}>
         {/* Logo Image - Hidden if error */}
         {!imageError && (
           <img 
              src="/assets/logo.png" 
              alt="ZeroSixLab" 
              className="w-full h-full object-cover rounded-full opacity-90 group-hover:opacity-100 transition-opacity" 
              onError={() => setImageError(true)}
           />
         )}
         {/* Fallback CSS Logo - Shown if image fails or not found */}
         {imageError && (
           <div className="absolute inset-0 bg-zsl-bg flex items-center justify-center">
              <div className="absolute left-[25%] top-[40%] w-[20%] h-[20%] rounded-full bg-zsl-primary shadow-[0_0_8px_#00D4FF] flex items-center justify-center text-black font-bold text-[60%] leading-none">0</div>
              <div className="absolute right-[25%] top-[40%] w-[20%] h-[20%] rounded-full bg-zsl-accent shadow-[0_0_8px_#FFAA00] flex items-center justify-center text-black font-bold text-[60%] leading-none">6</div>
              <div className="w-[80%] h-[80%] border-2 border-zsl-text/80 rounded-full opacity-30"></div>
          </div>
         )}
      </div>
      {showText && (
        <div className={`font-mono font-bold tracking-wider ${textSizes[size]}`}>
          <span className="text-white">Zero</span>
          <span className="text-zsl-primary">Six</span>
          <span className="text-white">Lab</span>
        </div>
      )}
    </div>
  );
};
