import { User } from 'lucide-react';
import { Box } from './Box';
import { Icon } from './Icon';

export interface PlaceholderImageProps {
  width?: string | number;
  height?: string | number;
  size?: string | number;
  className?: string;
}

export const PlaceholderImage = ({ 
  width, 
  height,
  size,
  className
}: PlaceholderImageProps) => {
  const dimension = size || '100%';
  return (
    <Box 
      width={width || dimension} 
      height={height || dimension} 
      display="flex" 
      alignItems="center" 
      justifyContent="center" 
      bg="var(--ui-color-bg-surface-muted)"
      style={{ borderRadius: 'var(--ui-radius-md)' }}
      className={className}
    >
      <Icon icon={User} size={6} intent="low" />
    </Box>
  );
};