/**
 * KRA - Logo Component
 * Display KRA logo with optional title
 */
import React from 'react';

interface LogoProps {
  collapsed?: boolean;
  showTitle?: boolean;
  size?: 'small' | 'default' | 'large';
  className?: string;
  style?: React.CSSProperties;
}

const sizeMap = {
  small: { logo: 24, fontSize: 14 },
  default: { logo: 32, fontSize: 18 },
  large: { logo: 48, fontSize: 24 },
};

const Logo: React.FC<LogoProps> = ({
  collapsed = false,
  showTitle = true,
  size = 'default',
  className,
  style,
}) => {
  const { logo: logoSize, fontSize } = sizeMap[size];

  return (
    <div
      className={className}
      style={{
        display: 'flex',
        alignItems: 'center',
        gap: 8,
        padding: '0 16px',
        height: 64,
        ...style,
      }}
    >
      <img
        src="/logo.svg"
        alt="KRA Logo"
        style={{
          width: logoSize,
          height: logoSize,
        }}
      />
      {showTitle && !collapsed && (
        <span
          style={{
            fontSize,
            fontWeight: 600,
            color: 'inherit',
            whiteSpace: 'nowrap',
          }}
        >
          Kratos Admin
        </span>
      )}
    </div>
  );
};

export default Logo;