import React from 'react';
import { Typography } from 'antd';

interface LogoProps {
  variant?: 'primary' | 'secondary';
  className?: string;
  theme?: 'light' | 'dark';
}

/**
 * Brand Logo Component
 * 
 * Implements the placeholder specification:
 * - Primary: 100x40px, for Header
 * - Secondary: 80x30px, for Footer
 * - Contains "Placeholder" watermark at 15% opacity
 */
export const Logo: React.FC<LogoProps> = ({ 
  variant = 'primary', 
  className = '',
  theme = 'light'
}) => {
  const isPrimary = variant === 'primary';
  
  // Dimensions
  const width = isPrimary ? 100 : 80;
  const height = isPrimary ? 40 : 30;
  
  // Styles
  const containerStyle: React.CSSProperties = {
    width: `${width}px`,
    height: `${height}px`,
    backgroundColor: '#f3f4f6', // gray-100
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    position: 'relative',
    border: '1px dashed #d1d5db', // gray-300
    borderRadius: '4px',
    overflow: 'hidden',
  };

  const watermarkStyle: React.CSSProperties = {
    position: 'absolute',
    color: '#000',
    opacity: 0.15,
    fontSize: isPrimary ? '12px' : '10px',
    fontWeight: 'bold',
    transform: 'rotate(-15deg)',
    whiteSpace: 'nowrap',
    userSelect: 'none',
    pointerEvents: 'none',
  };

  const textStyle: React.CSSProperties = {
    color: '#008C8C', // Mars Green
    fontWeight: 700,
    fontSize: isPrimary ? '16px' : '12px',
    zIndex: 1,
  };

  return (
    <div 
      className={`logo-placeholder ${className}`} 
      style={containerStyle}
      title="Logo Placeholder (Microsoft style)"
    >
      <div style={watermarkStyle}>Placeholder</div>
      <span style={textStyle}>
        {/* Simulating a logo icon/text structure */}
        {isPrimary ? 'LOGO' : 'Logo'}
      </span>
    </div>
  );
};
