import React from 'react';

interface AppLogoProps {
  className?: string;
}

/**
 * NetMesh app icon — rounded tile with primary-color background and the elf SVG.
 * This replaces the old hand-drawn netcatty logo so every surface (vault sidebar,
 * tray icon, lock overlay, traffic diagram, etc.) renders the same elf + theme tile.
 */
export const AppLogo: React.FC<AppLogoProps> = ({ className }) => (
  <div
    className={`relative flex items-center justify-center overflow-hidden rounded-[22%] ${className || ''}`}
    style={{
      background:
        'linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--primary) / 0.85) 100%)',
    }}
  >
    <img
      src="/senmesh-elf-logo.svg"
      alt=""
      className="w-full h-full object-contain drop-shadow-sm"
      draggable={false}
    />
  </div>
);

export default AppLogo;