import React from 'react';

/**
 * My Agent Kit - Monochrome Stack Logo
 * Can be used dynamically with different fill/stroke colors for dark/light themes.
 */
interface LogoProps extends React.SVGProps<SVGSVGElement> {
  size?: number;
  className?: string;
  fill?: string;
  stroke?: string;
}

export const Logo: React.FC<LogoProps> = ({ 
  size = 120, 
  className = '', 
  fill = 'currentColor', 
  stroke = 'transparent',
  ...props 
}) => {
  return (
    <svg 
      width={size} 
      height={size} 
      viewBox="0 0 200 230" 
      fill={fill} 
      stroke={stroke}
      className={className} 
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      {/* Shadow */}
      <ellipse cx="100" cy="214" rx="70" ry="8" fill="rgba(0,0,0,0.1)" />

      {/* LAYER 1 (Bottom) */}
      <polygon points="100,110 180,150 100,190 20,150" fill={fill === 'currentColor' ? '#1e1e1e' : fill} opacity={0.6} />
      <polygon points="20,150 100,190 100,210 20,170" fill={fill === 'currentColor' ? '#0d0d0d' : fill} opacity={0.8} />
      <polygon points="100,190 180,150 180,170 100,210" fill={fill === 'currentColor' ? '#141414' : fill} opacity={0.9} />

      {/* LAYER 2 */}
      <polygon points="100,80 180,120 100,160 20,120" fill={fill === 'currentColor' ? '#484848' : fill} opacity={0.6} />
      <polygon points="20,120 100,160 100,180 20,140" fill={fill === 'currentColor' ? '#282828' : fill} opacity={0.8} />
      <polygon points="100,160 180,120 180,140 100,180" fill={fill === 'currentColor' ? '#363636' : fill} opacity={0.9} />

      {/* LAYER 3 */}
      <polygon points="100,50 180,90 100,130 20,90" fill={fill === 'currentColor' ? '#8a8a8a' : fill} opacity={0.6} />
      <polygon points="20,90 100,130 100,150 20,110" fill={fill === 'currentColor' ? '#5e5e5e' : fill} opacity={0.8} />
      <polygon points="100,130 180,90 180,110 100,150" fill={fill === 'currentColor' ? '#707070' : fill} opacity={0.9} />

      {/* LAYER 4 (Top) */}
      <polygon points="100,20 180,60 100,100 20,60" fill={fill === 'currentColor' ? '#d5d5d5' : fill} opacity={0.6} />
      <polygon points="20,60 100,100 100,120 20,80" fill={fill === 'currentColor' ? '#a5a5a5' : fill} opacity={0.8} />
      <polygon points="100,100 180,60 180,80 100,120" fill={fill === 'currentColor' ? '#bababa' : fill} opacity={0.9} />

      {/* BADGE */}
      <polygon points="156,53 166,58 156,63 146,58" fill="#e04422" />
      <polygon points="146,58 156,63 156,67 146,62" fill="#9a2c14" />
      <polygon points="156,63 166,58 166,62 156,67" fill="#b03318" />
    </svg>
  );
};

export default Logo;
