import React from 'react';

interface DesktopIconProps {
  icon: string | any;
  name: string;
  onClick: () => void;
}

const DesktopIcon: React.FC<DesktopIconProps> = ({ icon, name, onClick }) => {
  const styles = {
    desktopIcon: {
      display: 'flex' as const,
      flexDirection: 'column' as const,
      alignItems: 'center',
      justifyContent: 'center',
      width: '80px',
      padding: '10px',
      cursor: 'pointer',
      borderRadius: '8px',
      transition: 'all 0.2s',
      color: 'white',
      textShadow: '0 1px 2px rgba(0,0,0,0.5)',
    },
    iconImage: {
      fontSize: '48px',
      marginBottom: '8px',
    },
    iconName: {
      fontSize: '12px',
      textAlign: 'center' as const,
      fontWeight: 500,
    },
  };

  return (
    <div 
      style={styles.desktopIcon}
      onClick={onClick}
      onMouseEnter={(e) => {
        e.currentTarget.style.background = 'rgba(255,255,255,0.2)';
        e.currentTarget.style.transform = 'scale(1.05)';
      }}
      onMouseLeave={(e) => {
        e.currentTarget.style.background = 'transparent';
        e.currentTarget.style.transform = 'scale(1)';
      }}
    >
      <div style={styles.iconImage}>{icon}</div>
      <span style={styles.iconName}>{name}</span>
    </div>
  );
};

export default DesktopIcon;