import Logo from '@/components/ui/Logo';

interface BrandLogoProps {
  showPulse?: boolean;
  className?: string;
  size?: number;
}

const BrandLogo = ({ showPulse = false, className = '', size }: BrandLogoProps) => {
  // Extract size from className if provided (e.g., h-20 w-20 = 80px)
  const sizeMatch = className.match(/h-(\d+)|w-(\d+)/);
  const extractedSize = sizeMatch ? parseInt(sizeMatch[1] || sizeMatch[2]) * 4 : undefined;
  const logoSize = size || extractedSize || 40;

  return (
    <div
      className={`relative rounded-lg flex items-center justify-center shadow-sm ${className}`}
      style={size ? { width: `${size}px`, height: `${size}px` } : undefined}
    >
      <Logo size={logoSize} className="h-full w-full" />
      {showPulse && (
        <span className="absolute -top-1 -right-1 h-2.5 w-2.5 rounded-full bg-success ring-2 ring-background animate-pulse" />
      )}
    </div>
  );
};

export default BrandLogo;