import React from 'react';
import { Box } from './primitives/Box';
import { Icon } from './Icon';
import { Image as ImageIcon } from 'lucide-react';

export interface ImagePlaceholderProps {
  width?: string | number;
  height?: string | number;
  animate?: 'pulse' | 'none' | 'spin';
  aspectRatio?: string;
}

export const ImagePlaceholder = ({ 
  width = '100%', 
  height = '100%',
  animate = 'pulse',
  aspectRatio
}: ImagePlaceholderProps) => {
  return (
    <Box 
      width={width} 
      height={height} 
      aspectRatio={aspectRatio}
      display="flex" 
      alignItems="center" 
      justifyContent="center" 
      bg="var(--ui-color-bg-surface-muted)"
      style={{ borderRadius: 'var(--ui-radius-md)' }}
    >
      <Icon 
        icon={ImageIcon} 
        size={8} 
        intent="low" 
        animate={animate === 'spin' ? 'spin' : 'none'} 
        className={animate === 'pulse' ? 'animate-pulse' : ''}
      />
    </Box>
  );
};