interface AboutDialogProps { onClose: () => void }

export function AboutDialog({ onClose }: AboutDialogProps) {
  return (
    <div data-testid="about-dialog" style={{
      position: 'fixed', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
      background: 'rgba(0,0,0,0.3)', zIndex: 300,
    }}>
      <div style={{
        background: '#f5f5f5', border: '1px solid #a0a0a0', borderRadius: 6, padding: 24,
        width: 320, textAlign: 'center', fontFamily: 'system-ui, sans-serif', color: '#1a1a1a',
      }}>
        <h2 style={{ margin: '0 0 8px', fontSize: 20 }}>MeshLab Web</h2>
        <p style={{ margin: '0 0 12px', color: '#666', fontSize: 13 }}>Version 1.0.0</p>
        <p style={{ margin: '0 0 8px', fontSize: 12, color: '#555' }}>
          Based on MeshLab by Visual Computing Lab, ISTI - CNR
        </p>
        <p style={{ margin: '0 0 16px', fontSize: 11, color: '#888' }}>
          WebAssembly + Emscripten | Three.js | React
        </p>
        <p style={{ margin: '0 0 16px', fontSize: 12, fontWeight: 'bold' }}>
          147 Filters | 20 Formats | 16 Categories
        </p>
        <button onClick={onClose} style={{
          padding: '6px 24px', background: '#e0e0e0', border: '1px solid #a0a0a0',
          borderRadius: 3, cursor: 'pointer', fontSize: 13,
        }}>OK</button>
      </div>
    </div>
  );
}
