import React from 'react';
import logoImage from '../assets/PS.png';

interface LogoProps {
  className?: string;
  size?: 'sm' | 'md' | 'lg';
  showText?: boolean;
}

const Logo: React.FC<LogoProps> = ({ 
  className = '', 
  size = 'md', 
  showText = true 
}) => {
  const sizeClasses = {
    sm: 'h-8 w-8',
    md: 'h-12 w-12',
    lg: 'h-16 w-16'
  };

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

  return (
    <div className={`flex items-center space-x-3 ${className}`}>
      <div className={`${sizeClasses[size]} relative`}>
        <img 
          src={logoImage} 
          alt="Pantry Sync Logo" 
          className="w-full h-full object-contain"
        />
      </div>
      
      {showText && (
        <span className={`font-bold text-deep-forest ${textSizeClasses[size]}`}>
          Pantry Sync
        </span>
      )}
    </div>
  );
};

export default Logo;
