import React from 'react';
import { Box } from './Box';
import { Surface } from './Surface';
import { Image } from './Image';
import { Icon } from './Icon';
import { LucideIcon } from 'lucide-react';

export interface LogoProps {
  src?: string;
  alt: string;
  size?: number | string;
  icon?: LucideIcon;
  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
  variant?: 'default' | 'dark' | 'muted' | 'glass';
  border?: boolean;
}

export const Logo = ({
  src,
  alt,
  size = 48,
  icon,
  rounded = 'md',
  variant = 'muted',
  border = true,
}: LogoProps) => {
  const finalSize = typeof size === 'number' ? `${size}px` : size;

  return (
    <Surface
      variant={variant}
      rounded={rounded}
      border={border}
      style={{ 
        width: finalSize, 
        height: finalSize, 
        minWidth: finalSize,
        minHeight: finalSize,
        display: 'flex', 
        alignItems: 'center', 
        justifyContent: 'center', 
        overflow: 'hidden',
        flexShrink: 0,
        position: 'relative',
        backgroundColor: 'var(--ui-color-bg-base)',
      }}
    >
      {src ? (
        <Image
          src={src}
          alt={alt}
          style={{ 
            width: '100%', 
            height: '100%', 
            objectFit: 'cover',
          }}
        />
      ) : icon ? (
        <Icon icon={icon} size={typeof size === 'number' ? (size > 32 ? 6 : 4) : 6} intent="low" />
      ) : null}
    </Surface>
  );
};